Webpack2，如何从构建中排除反应和反应dom

Question

我的目标是使用 webpack 为在 ES6 中制作的 React 组件库创建一个模块。

我正在使用：

webpack: "2.1.0-beta.25"
反应：“15.4.1”

我需要将 react 和 react-dom 分配为 peerDependencies，这样它就不会被开发人员下载。

这是我package.json的相关部分：

"peerDependencies": {
  "react": "15.4.1"
},
"dependencies": {
  "chalk": "1.1.3",
  "compression": "1.6.2",
  "cross-env": "3.1.3",
  "immutable": "3.8.1",
  "invariant": "2.2.1",
  "lodash": "4.16.4",
  "minimist": "1.2.0",
  "sanitize.css": "4.1.0",
  "warning": "3.0.0",
  "react-onclickoutside": "5.8.3",
  "styled-components": "1.1.2",
  "classnames": "2.2.5"
},
"devDependencies": {
  "react": "15.4.1",
  "react-dom": "15.4.1",

根据https://webpack.github.io/docs/configuration.html#externals and https://webpack.github.io/docs/library-and-externals.html，

我试过以下配置：

1.

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
},

2。外部：{ 反应：'react'， 'react-dom' : 'react-dom', }

3.

 externals: {
  react: 'React',
  'react-dom' : 'ReactDOM',
 }

4.

externals: {
  react: 'umd react',
  'react-dom' : 'umd react-dom'
}

5.

    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    },

我总是遇到这个错误：

 Dynamic page loading failed Error: 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://bf.me/react-refs-must-have-owner).(…)

所以我想知道，文档对此不是很清楚。

2017 年 12 月，最多 2018 年 1 月，如何排除 React 和 ReactDOM 被捆绑？

Answer 1

编辑：

在你试过的例子中没有看到这个。正如 OP 所提到的，以下 JSON 配置对他们不起作用。

来自 GitHub issue #1275，试试这个：

{
    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

如果这不起作用，请尝试通读整个问题页面。有一些建议最终可能对您有用。

Answer 2

一种方法可以将它们放入单独的文件中，例如 reactjs 通过

  entry: {
      app:'./src/app.jsx',
      reactjs:[
          'react','react-dom'               ,
      ]
  }

  output: {
    path       : path.join(__dirname, 'public'),
    filename   : 'bundle.[name].js',
    publicPath : '/public/'
  },

 plugins : [
     new webpack.optimize.CommonsChunkPlugin({
        name: 'reactjs',
     })
 ]

现在 webpack 将构建两个文件 bundle.app.js 和 bundle.reactjs.js。将它们包含在您的 index.html 中，先做出反应，然后再应用。

Answer 3

这是我的 webpack 配置，它只是基础知识，因为我正在处理一个较小的项目

const {resolve} = require('path');

module.exports = {
  entry: './demo/react/main.jsx',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'demo/react/dist')
  }
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]

      }
    ]
  },
  externals: {
    // Use external version of React
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

Webpack2，如何从构建中排除反应和反应dom

Webpack2, how to exclude react and react dom from build

jsx

reactjs

webpack

webpack-dev-server

react-dom

编辑：