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

I'm using Browserify to bundle a ReactJS application.

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

All my components include a require("react") at the top. This causes Browserify to include the ReactJS source in my bundle. But I'd like to exclude it.

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

How do I do that? Is this the right thing to do?

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

4 个解决方案

#1

@NickTomlin gave this answer, but then deleted it.

@NickTomlin给出了这个答案，但后来删除了它。

You can use external:

你可以使用外部：

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

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

An example using the api:

使用api的一个例子：

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

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

This is a viable option. external requires another script to provide the module in a compatible way. You can produce such a script like this:

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

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

And in HTML:

在HTML中：

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

dest.js is your code except react. react.js is just react and its dependencies.

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

Need more things external? Just add them in addition to react.

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

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

You could also do something like this in package.json

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

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

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

And compile with -x react. This allows you to accept a -r react build, and fallback to a global React.

用-x反应编译。这允许您接受-r react build，并回退到全局React。

#2

Sounds like you want to use browserify-shim.

听起来你想使用browserify-shim。

In your package.json

在你的package.json中

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

(untested). This section has more information.

（未经测试）。本节提供了更多信息。

#3

I also wanted to do this, and found a possible solution.

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

From the browserify -h help:

从browserify -h help：

--ignore, -i Replace a file with an empty stub. Files can be globs.

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

Just use the ignore feature.

只需使用忽略功能。

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

I also added react and react-dom as peer dependencies, cause in my case, the package can be imported in other packages builds.

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

#4

-2

You can also use the externals section in the webpack.config.js file. eg:-

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

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

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

请参阅https://webpack.github.io/docs/library-and-externals.html

#1