javascript 如何从我的浏览器包中排除“require('react')”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29222745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I exclude the "require('react')" from my Browserified bundle?
提问by André Pena
I'm using Browserifyto bundle a ReactJSapplication.
我正在使用Browserify捆绑ReactJS应用程序。
All my components include a require("react")at the top. This causes Browserifyto include the ReactJSsource 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?
我怎么做？这是正确的做法吗？
回答by Brigand
@NickTomlin gave this answer, but then deleted it.
@NickTomlin 给出了这个答案，但随后将其删除。
You can use external:
您可以使用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. externalrequires 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。react.js 只是 react 及其依赖项。
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 reactbuild, and fallback to a global React.
并用-x react. 这允许您接受-r react构建，并回退到全局 React。
回答by Andy Ray
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 sectionhas more information.
（未经测试）。本节有更多信息。
回答by Gianluca Casati
I also wanted to do this, and found a possible solution.
我也想这样做，并找到了一个可能的解决方案。
From the browserify -hhelp:
从browserify -h帮助：
--ignore, -i Replace a file with an empty stub. Files can be globs.
--ignore, -i 用空存根替换文件。文件可以是 globs。
Just use the ignorefeature.
只需使用忽略功能。
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 作为对等依赖项，因为在我的情况下，该包可以导入到其他包构建中。
回答by dmdaniel
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
