我正在使用不同的依赖项(例如page,superagent,vue)开发客户端项目。为了优化我的grunt-browserify任务速度,我想在一个文件中创建一个包含所有这些依赖项的包,例如lib.js.我的源码将在app.js中编译。然后我想我必须将两者都连接到我的build.js中。使用此设置,grunt只需要更新app.js和build.js),而不是lib.js.这也意味着对于lib.js中包含的每个依赖项,我仍然可以要求(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']
}
}
}
我知道它不起作用,因为我的文件对象不正确,但是我不知道如何自动获取每个依赖项的主文件。
任何帮助将不胜感激。谢谢!
答案 0 :(得分:0)
我终于想到了如何为凉亭组件做这件事(尚未针对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']
}
}
为每个库制作填充程序或别名很重要。当我第一次尝试制作一个外部包时,我正在使用几个干扰外部事物的browserify转换(例如debowerify / deglobalify)。