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

Posted 2023-02-21

【中文标题】Webpack2，如何从构建中排除 react 和 react dom

【英文标题】：Webpack2, how to exclude react and react dom from build

【发布时间】：2017-05-11 23:56:51

【问题描述】：

我的目标是为使用 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和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-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 排除在捆绑之外？

【问题讨论】：

Why is react complaining of existing multiple time的可能重复

【参考方案1】：

编辑：

在您尝试过的示例中没有看到这一点。正如 OP 所述，以下 JSON 配置不适用于他们。

---

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

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

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

【讨论】：

啊，我在您的尝试示例列表中没有看到。我的错。祝你好运！

是的，这对我有用 :)，我只需要通过 CDN 交付的那些

【参考方案2】：

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

  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 中，首先反应，然后是应用程序。

【讨论】：

我目前正在尝试您的解决方案，但如果没有更清洁的方法，我会感到惊讶，这将生成无用的文件，我将不得不在 .npmignore 和 .gitignore 中排除这些文件。不确定它是否有效，我会测试并告诉你

在任何情况下，您都不应该将生成的构建文件包含到 git 中

好吧，我现在有以下错误：未定义 webpackJsonpbootstrap_styled。 “所以现在 webpack 将构建两个文件 bundle.app.js 和 bundle.reactjs.js。将它们包含在你的 index.html 中，首先反应然后应用程序。”另外，这是一个应用程序，这是一个 npm 包，这就是我根本不想 React 的原因。

你应该检查这个***.com/questions/35131367/…

我已经将我的模块设置为 umd，umd 工作正常，我的模块工作完美，唯一的问题是它抱怨第二个 react 实例，这显然是与模块捆绑在一起的那个。一旦我尝试了您的技术，大小就会从 900ko 减小到 (650kb +250kb (bundle.react.js))。另一方面，我没有导入反应包。有什么想法吗？

【参考方案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'
  
;