reactjs - 如何使用 webpack 来捆绑库而不捆绑重复的 react 依赖项？

Question

我正在构建一个可重用的 React 库，该库使用其他 React 库作为依赖项。我正在使用 webpack 作为构建工具。

我遇到的挑战是当我将我的库导入我的应用程序时，它是用 create-react-app 构建的，我收到以下错误:

addComponentAsRefTo(...): Only a ReactOwner can have refs. 
You might be adding a ref to a component that was not created inside a component's `render` method, 
or you have multiple copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).

据我所知，问题是 webpack 在我的库中以一个冲突的版本捆绑了一个额外的 react 副本。

我已经尝试了几个建议，但似乎都没有用。我尝试过:

1. 在我的 webpack 中添加 react 作为别名

  resolve: {
    alias: {
      'react' : path.resolve(__dirname, 'node_modules/react'),
    },
    modules: [path.join(__dirname, 'node_modules')],
    extensions: [".js", ".jsx"]
  },

2. 在 webpack 中添加 react 和 react-dom 作为外部:

  externals: {
    'ReactCSSTransitionGroup': 'react/lib/ReactCSSTransitionGroup',
    'react': {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      umd: 'react',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
      root: 'ReactDOM'
    }
  },

3. 还尝试在 package.json 中添加 react 作为 devDependency 和 peerDependency。

如果我在库链接到应用程序时删除 node_modules 文件夹，它就会开始工作。这显然不是一个解决方案，但更多的是暗示它正在从 node_modules 中引入一个额外的 react 副本。我一运行 npm i 问题就回来了。

这是我的完整 webpack:

const path = require('path')
const SRC_DIR = path.resolve(__dirname, 'src')
const DIST_DIR = path.resolve(__dirname, 'dist')

module.exports = {
  entry: SRC_DIR + '/index.js',
  output: {
    path: DIST_DIR,
    filename: 'index.js',
    libraryTarget: 'umd'
  },
  resolve: {
    alias: {
      'react' : path.resolve(__dirname, 'node_modules/react'),
    },
    modules: [path.join(__dirname, 'node_modules')],
    extensions: [".js", ".jsx"]
  },
  resolveLoader: {
    modules: [path.join(__dirname, 'node_modules')]
  },
  externals: {
    'ReactCSSTransitionGroup': 'react/lib/ReactCSSTransitionGroup',
    'react': {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      umd: 'react',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
      root: 'ReactDOM'
    }
  },
  module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {
          test: /\.js?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: [
              'transform-class-properties',
              'transform-object-rest-spread'
            ]
          }
        }
    ]
  }
};

还有我的 package.json:

{
  "name": "test-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "start": "webpack --progress --colors --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-react-css-modules": "3.2.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "react": "^15.0.0",
    "react-bootstrap-table": "4.0.2",
    "react-dom": "15.6.1"
  }
}

我还创建了两个 repos 来重现错误，一个是测试应用程序，一个是测试库。重现:

1. 克隆应用程序和库并运行 npm i:应用程序:https://github.com/scottmcpherson/test-app图书馆:https://github.com/scottmcpherson/git-library

2. cd 进入库并运行 npm link

3. cd 进入应用程序并运行 npm link test-library

4. cd 回到应用程序并运行 npm start

5. 您应该会看到错误出现在浏览器中。如果您在编辑器中打开应用程序并查看 App.js，您可以看到我正在尝试导入测试库的位置。

这个错误只发生是因为库依赖于react-bootstrap-table。如果我注释掉那个模块并只渲染一个普通的 jsx 表，那么一切正常。

Answer 1

根据 documentation为避免依赖项重复，您可以尝试这样做:

new webpack.optimize.CommonsChunkPlugin({
  name: 'common'
})