嗨,我正在尝试使用create-react-app构建组件。这将在另一个父应用程序中使用。父应用程序从git安装组件。父应用程序的package.json
中有类似的内容"component": "<git url of component>",
因此,我添加了另一个webpack.config.js并将其用于将组件捆绑到一个文件中。
由于父应用程序具有react和react-dom,所以我不应该将它们添加到捆绑包中,因此我将它们添加到webpack的外部中。 我已经将以下脚本添加到package.json
"scripts": {
"buildcomponent": "SET NODE_ENV=production&&rm -rf dist && mkdir dist && npx babel src/discussion --out-dir dist --copy-files",
"bundlecomponent": "webpack --config webpack.config.js",
"createbundle": "npm run buildcomponent && npm run bundlecomponent"
},
我使用createbundle脚本创建如下所示的包
npm run createbundle
下面是我的webpack配置
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")
module.exports = {
entry: {
"bundle.js": glob.sync("./dist/*.js")
},
output: {
filename: "build/static/js/bundle.min.js",
libraryTarget: 'umd'
},
externals: {
'react': 'react', // Case matters here
'react-dom' : 'ReactDOM' // Case matters here,
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
],
},
plugins: [new UglifyJsPlugin()],
}
以这种方式创建捆绑包。但是,当我尝试在父应用程序中使用组件时,出现错误,找不到模块ReactDOM。但是react-dom存在于父应用程序的依赖项列表中。