pix*_*pax 9 ember.js ember-cli broccolijs
我的西兰花构建需要花费很多时间.每次更改一行js时,构建约30秒(我的意思是使用dev服务器运行的增量重构,而不是完整的构建).
这是我的情况.我有一个项目A,它是项目B的一个ember插件npm link.我正在开发项目A,我ember server在项目B上运行.
每个单独的时间我对项目A中的一行javascript进行更改并重建,我看到项目B中的以下文件发生了变化:
B/dist/assets/vendor.css
B/dist/assets/vendor.js
B/dist/assets/vendor.map
B/dist/assets/B.css
B/dist/assets/B.css.map
Run Code Online (Sandbox Code Playgroud)
我担心的是,因为我正在开发一个链接包,我的西兰花配置是这样的,整个node_modules被重新组合到那些供应商文件中.
有没有办法让我配置ember/broccoli使用单独的文件来编译A并将其与其余部分隔离vendor.js?B/dist/assets/A.min.css并B/dist/assets/A.min.js为例子吗?
...或者我猜错了问题的原因?
非常感谢你的帮助!
编辑:这是一些额外的信息请求
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
Concat (11) | 39239ms (3567 ms)
RecastFilter (280) | 33127ms (118 ms)
Babel (233) | 14099ms (60 ms)
EslintValidationFilter (5) | 12632ms (2526 ms)
LessCompiler (46) | 7191ms (156 ms)
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
SourceMapConcat: Concat: Vendor /asset... (1) | 36270ms
LessCompiler (46) | 4029ms (87 ms)
Run Code Online (Sandbox Code Playgroud)
这是index.js(项目A):
const EngineAddon = require('ember-engines/lib/engine-addon');
const TreeMerger = require('broccoli-merge-trees');
const LessCompiler = require('broccoli-less-single');
const Funnel = require('broccoli-funnel');
const path = require('path');
module.exports = EngineAddon.extend({
name: 'ember-engine-admin-ui',
lazyLoading: false,
treeForVendor(tree) {
let addonTree = this.treeGenerator(path.resolve(this.root, this.options.trees.addon));
let compiledLessTree = new LessCompiler(addonTree, 'styles/addon.less', `styles/${this.name}.css`);
let sidebarCSSTree = new Funnel(path.dirname(require.resolve('sidebar-v2/css/leaflet-sidebar.css')), {
files: ['leaflet-sidebar.css'],
destDir: 'styles'
});
let sidebarJSTree = new Funnel(path.dirname(require.resolve('sidebar-v2/js/leaflet-sidebar.js')), {
files: ['leaflet-sidebar.js'],
destDir: 'js'
});
return new TreeMerger([tree, compiledLessTree, sidebarCSSTree, sidebarJSTree]);
},
included() {
this._super.included.apply(this, arguments);
this.import(`vendor/styles/${this.name}.css`);
this.import('vendor/js/leaflet-sidebar.js');
this.import('vendor/styles/leaflet-sidebar.css');
},
isDevelopingAddon() {
return true;
}
});
Run Code Online (Sandbox Code Playgroud)