如何从我的 Browserified 包中排除 "require('react')"?
How do I exclude the "require('react')" from my Browserified bundle?
我正在使用 Browserify
捆绑 ReactJS
应用程序。
我所有的组件都在顶部包含一个 require("react")
。这导致 Browserify
在我的包中包含 ReactJS
源。但我想排除它。
我该怎么做?这是正确的做法吗?
听起来您想使用 browserify-shim。
在你的package.json
"browserify-shim": {
"react": "global:React"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
(未经测试)。 This section 有更多信息。
@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 只是 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 -h
帮助:
--ignore, -i Replace a file with an empty stub. Files can be globs.
只需使用忽略功能。
browserify -i react -i react-dom ...
我还添加了 react 和 react-dom 作为对等依赖项,因为在我的例子中,该包可以导入到其他包构建中。
您还可以使用 webpack.config.js 文件中的外部部分。例如:-
externals: {
// require('jquery') is loaded externally and avaliable as jQuery
"jquery": "jQuery"
}
我正在使用 Browserify
捆绑 ReactJS
应用程序。
我所有的组件都在顶部包含一个 require("react")
。这导致 Browserify
在我的包中包含 ReactJS
源。但我想排除它。
我该怎么做?这是正确的做法吗?
听起来您想使用 browserify-shim。
在你的package.json
"browserify-shim": {
"react": "global:React"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
(未经测试)。 This section 有更多信息。
@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 只是 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 -h
帮助:
--ignore, -i Replace a file with an empty stub. Files can be globs.
只需使用忽略功能。
browserify -i react -i react-dom ...
我还添加了 react 和 react-dom 作为对等依赖项,因为在我的例子中,该包可以导入到其他包构建中。
您还可以使用 webpack.config.js 文件中的外部部分。例如:-
externals: {
// require('jquery') is loaded externally and avaliable as jQuery
"jquery": "jQuery"
}