Question

嗨，我正在尝试使用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存在于父应用程序的依赖项列表中。

将模块ReactDOM添加到外部后，无法在父应用程序中找到模块ReactDOM

0 个答案: