reactjs - 如何使用 Webpack 配置缩小的 React+ReactDOM

Question

经过太多次不成功的尝试后，我的问题是:设置 Webpack 的正确方法是什么，以便:

1. 使用react.min.js + react-dom.min.js - 而不是npm安装的源
2. 不要再次解析/com它们，只需与我自己的组件捆绑在一起。
3. “React”和“ReactDOM”变量可以在所有 .jsx 文件中使用。

我发现的教程和指南不起作用 - 或者也许我犯了一些错误。通常我在浏览器开发工具中会收到关于缺少变量 React 的错误。

我的目标只是节省解析/捆绑时间。现在，每次捆绑我的应用程序时，我都会从头开始解析 React。在速度较慢的计算机上需要数十秒。在 watch 模式下速度更快，但我发现我做了不必要的工作。

最近的 React 版本有什么想法吗？

Answer 1

假设您有一个如下所示的 webpack.config.js:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    }
};

您只需将 React 和 ReactDOM 指定为外部依赖项 ( from the docs ):

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    },
    externals: {
        // "node/npm module name": "name of exported library variable"
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

关于 externals 部分的关键点是，键是要引用的模块的名称，值是要引用的模块的名称库在 <script> 标记中使用时公开的变量。

在此示例中，使用以下两个脚本标记:

<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>

导致创建两个顶级变量:React 和 ReactDOM。

通过上述 externals 配置，在源代码中只要有 require('react')，它就会返回全局变量 的值React 而不是将 React 与你的输出捆绑在一起。

但是，为了执行此操作，包含您的 bundle 的页面必须包含引用的库(在本例中为 react 和 react-dom) 在包含您的 bundle 之前。

希望有帮助!

<小时/>

*编辑*

好的，我明白你想做什么。您想要的 webpack 配置选项是 module.noParse .

This disables parsing by webpack. Therefore you cannot use dependencies. This may be useful for prepackaged libraries.

对于example :

{
    module: {
        noParse: [
            /XModule[\\\/]file\.js$/,
            path.join(__dirname, "web_modules", "XModule2")
        ]
    }
}

因此，您将拥有 react.min.js、react-dom.min.js 和 jquery.min.js某些文件夹中的文件(例如 ./prebuilt)，然后您将像任何其他本地模块一样需要它们:

var react = require('./prebuilt/react.min');

webpack.config.js 中的条目看起来像这样(未经测试):

{
    module: {
        noParse: [
            /prebuilt[\\\/].*\.js$/
        ]
    }
}

[\\\/] 困惑是为了匹配 Windows 和 OSX/Linux 上的路径。