如何从Browserify捆绑包中排除库文件 [英] How to exclude library files from browserify bundle
问题描述
我想避免将分发包与库文件弄乱，并在HTML中为其使用单独的脚本标签。
I want to avoid cluttering up my distribution bundle with library files and use separate script tags for them in the HTML.
一种方法是这样的...
One way is like this...
m1.js
m1.js
module.exports = "first module";
m2.js
m2.js
module.exports = "second module";
cnd-m1.js
cnd-m1.js
var m1 = "first module";
main.js
var m1 = this.m1 || require("./src/m1");
var m2 = require("./src/m2");
console.log(m1);
console.log(m2);
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>browserify test</title>
</head>
<body>
<script type="text/javascript" src="src/cdn-m1.js"></script>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
其中cdn-m1.js可能是一个库。
Where cdn-m1.js could be a library for example.
我想弄清楚的唯一方法是在require语句中放入一个短路后备，然后-忽略构建中的文件。
The only way I could figure out to make it work is to put a short-circuit fallback in the require statement and --ignore the file in my build.
in package.json
"scripts": {
"build-ignore": "browserify ./main.js -i ./src/m1.js > ./dist/bundle.js",
"build": "browserify ./main.js > ./dist/bundle.js"
},
在忽略构建的脚本中，m1模块被捆绑在捆绑包中，使其变得更小（假设其具有5万行库），并且退回到了CDN服务的版本。
Using the build-ignore script, the m1 module was stubbed in the bundle making it much smaller (assuming its a 50k line library) and it falls back on the cdn-served version.
bundle.js
bundle.js
function e(t, n, r) {
function s(o, u) {
if(!n[o]) {
if(!t[o]) {
var a = typeof require == "function" && require;
if(!u && a)return a(o, !0);
if(i)return i(o, !0);
var f = new Error("Cannot find module '" + o + "'");
throw f.code = "MODULE_NOT_FOUND", f
}
var l = n[o] = {exports: {}};
t[o][0].call(l.exports, function(e) {
var n = t[o][1][e];
return s(n ? n : e)
}, l, l.exports, e, t, n, r)
}
return n[o].exports
}
var i = typeof require == "function" && require;
for(var o = 0; o < r.length; o++)s(r[o]);
return s
})({
1: [function(require, module, exports) {
// browserify creates a stub for "./src/m1"
}, {}],
2: [function(require, module, exports) {
var m1 = this.m1 || require("./src/m1");
var m2 = require("./src/m2");
console.log(m1);
console.log(m2);
}, {"./src/m1": 1, "./src/m2": 3}],
3: [function(require, module, exports) {
module.exports = "second module";
}, {}]
}, {}, [2]);
是否有更好的方法来实现这一目标？
Is there a better way to achieve this?
推荐答案
首先，您必须为 m1.js 创建一个单独的捆绑包：
First you have to create a seperate bundle for m1.js:
browserify -r ./src/m1.js > ./dist/m1_bundle.js
然后只需创建普通捆绑包并引用创建的 m1_bundle.js ：
then simply create the "normal" bundle and reference to the created m1_bundle.js:
browserify -x m1 -d ./main.js > ./dist/bundle.js
现在您必须将这两个捆绑包包含到HTML文件中。
now you have to include the two bundles into your HTML-file.
注意：您必须在
之前加入 m1_bundle.jsbundle.js在您的HTML中。
NOTE: you have to include the
m1_bundle.jsbefore the "normal"bundle.jsin your HTML.
有关详细信息，请显示我的其他< a href = https://stackoverflow.com/questions/8125006/google-chrome-developer-toolkit-is-slow/30398357#30398357> answer 。我在那里解释了如何执行相同的操作，但是要使用 node_modules 而不是自己的库。
For more details show my other answer. There i explain, how to do the same thing but with node_modules instead of an own library.
这篇关于如何从Browserify捆绑包中排除库文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
