如何从我的 Browserified 包中排除“require('react')”？答案

【问题标题】：How do I exclude the "require('react')" from my Browserified bundle?如何从我的 Browserified 包中排除“require('react')”？
【发布时间】：2015-05-27 04:20:07
【问题描述】：

我正在使用Browserify 捆绑ReactJS 应用程序。

我所有的组件在顶部都包含一个require("react")。这会导致Browserify 在我的包中包含ReactJS 源。但我想排除它。

我该怎么做？这是正确的做法吗？

【问题讨论】：

标签： javascript reactjs browserify

【解决方案1】：

听起来你想使用browserify-shim。

在你的package.json

"browserify-shim": {
    "react": "global:React"
},
"browserify": {
    "transform": [ "browserify-shim" ]
},
"dependencies": {
    "browserify-shim": "~3.2.0"
}

（未经测试）。 This section 有更多信息。

【讨论】：

另见：stackoverflow.com/questions/23125338/…
我在使用 browserify-shim 时遇到了很多麻烦。我有一个我正在尝试浏览器化的 umd 模块，它不会更改模块 require('foo') 调用 global['Foo'] 即使我的 package.json 指定 browserify-shim: { 'foo': '全球：Foo'}。我是否需要以某种方式定位该模块？像 browserify-shim: { 'mod': { depends: "foo" }}

【解决方案2】：

@NickTomlin 给出了这个答案，但随后将其删除。

你可以使用external:

browserify --external react src.js > dest.js

一个使用api的例子：

var bundler = browserify('src.js');

bundler.external('react');
bundler.bundle();

这是一个可行的选择。 external 需要另一个脚本以兼容的方式提供模块。您可以像这样生成这样的脚本：

browserify -r react > react.js
env NODE_ENV=production browserify -r react | uglifyjs -m > react.min.js

在 HTML 中：

<script src="react.js"></script>
<script src="dest.js"></script>

dest.js 是你的代码，除了 react。 react.js 只是 react 及其依赖项。

需要更多外部的东西吗？只需将它们添加到反应之外。

browserify -x react -x react-bootstrap src.js > dest.js
browserify -r react -r react-bootstrap > vendor.js

你也可以在 package.json 中做这样的事情

"browser": {"react": "./react-fake.js"}

// ./react-fake.js
try {
    module.exports = require('react');
} catch(e){
    module.exports = window.React;
}

并使用-x react 编译。这允许您接受 -r react 构建，并回退到全局 React。

【讨论】：

我相信中间的代码块有错字。第一个 browserify 的输出文件名应该是 dest.js 而不是 vendor.js，否则第二个 browserify 会覆盖第一个。
问题是，browser 只是一个转换，所以它不适用于你的 node_modules。因此，如果您有任何引用 react 的 node_modules 库，那么它们将抛出“未找到模块”错误。

【解决方案3】：

我也想这样做，并找到了可能的解决方案。

来自browserify -h 帮助：

--ignore, -i 用空存根替换文件。文件可以是 glob。

只需使用忽略功能。

browserify -i react -i react-dom ...

我还添加了 react 和 react-dom 作为对等依赖项，因为在我的情况下，该包可以导入到其他包构建中。

【讨论】：

【解决方案4】：

您还可以使用 webpack.config.js 文件中的 externals 部分。例如：-

externals: {
        // require('jquery') is loaded externally and avaliable as jQuery
        "jquery": "jQuery"
    }

见https://webpack.github.io/docs/library-and-externals.html

【讨论】：