我正在开发一个使用不同依赖项(例如 page、superagent、vue)的客户端项目。为了优化 grunt-browserify 任务速度,我想在一个文件中创建一个包含所有这些依赖项的包,例如 lib.js。我的源代码将在 app.js 中编译。然后我想我必须将两者连接到我的 build.js 中。通过此设置,grunt 只需要更新 app.js 和 build.js,而不是 lib.js。这也意味着对于 lib.js 中包含的每个依赖项,我仍然可以 require(dep)。
我已经阅读了一些有关它的内容,但我无法使其发挥作用。
我当前的 browserify 任务是:
browserify: {
dev: {
files: {
'build/app.js': ['src/**/*.js', 'src/**/*.html']
},
options: {
debug: true,
external: ['vue', 'superagent', 'page']
}
}
}
我尝试添加类似的内容但没有成功:
browserify: { // the dev target is still there
lib: {
files: {
'build/lib.js': ['vue', 'superagent', 'page']
}
}
}
我知道它不起作用,因为我的文件对象不正确,但我不知道如何自动获取每个依赖项的主文件。
如有任何帮助,我们将不胜感激。谢谢!
最佳答案
我终于想出了如何为 Bower 组件做到这一点(尚未测试 npm 模块)。
首先,libs browserify 任务(以 TweenMax 为例):
libs: {
files: {
'build/public/libs.js': ['bower_components/greensock/src/minified/TweenMax.min.js']
},
options: {
shim: {
TweenMax: {
path: 'bower_components/greensock/src/minified/TweenMax.min.js',
exports: 'TweenMax'
}
}
}
}
然后是应用程序任务:
dev: {
files: {
'build/public/desktop/desktop.js': ['src/desktop/**/*.js']
},
options: {
external: ['TweenMax']
}
}
为每个库创建垫片或别名非常重要。当我第一次尝试制作外部 bundle 时,我使用了几个会干扰外部事物的 browserify 转换(例如 debowerify/deglobalify)。
关于gruntjs - browserify 包中的多个节点模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22113360/