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

时间:2019-03-01 06:46:00

标签: reactjs npm webpack react-dom

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

0 个答案:

没有答案