Question

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

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

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

Answer 1

@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.js只是反应及其依赖。

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

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。

Answer 2

听起来您想使用browserify-shim。

在package.json

中

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

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

Answer 3

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

来自browserify -h帮助：

- 忽略，-i用空存根替换文件。文件可以是globs。

只需使用忽略功能。

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

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

Answer 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

如何从我的Browserified包中排除“require（'react'）”？

4 个答案: