如何使用 webpack 捆绑库而不捆绑重复的反应依赖项？

Question

我正在构建一个可重用的反应库，它使用其他反应库作为依赖项。我使用 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"
  }
}

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

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'
})