我遇到了一个奇怪的问题,需要你的帮助来弄清楚发生了什么。
我已经配置了 gulp 来构建用 ES6 中的 React.js 编写的测试。我使用 browserify
设置 CommonJS env 和 babelify
以获得更大的 ES6 支持。一切正常,只是如果需要 React 作为 CommonJS 模块,那么构建时间就太长了(在我看来)。意思是这个
import React from 'react';
line 会将初始构建中的捆绑/编译时间从 1.2secs
提高到大约 4secs
,然后当检测到任何更改时,大约需要 2.5secs
重建 js 文件。当包含更多模块时,这个时间会迅速增加。我的解决方法是配置 bower
将任何外部库公开为浏览器中的全局变量,不太喜欢这个解决方案。
这是我的主要browserify
设置:
function buildApp () {
return browserify({
entries: config.paths.jsx,
extensions: ['.jsx'],
debug: true
})
.bundle()
.on('error', onError)
.pipe(source('app.js'))
.pipe(gulp.dest(config.paths.dest));
}
并且转换是通过packages.json
添加的
"browserify": {
"transform": [
"babelify"
]
}
我确实在我的 buildApp function
中尝试了 ignore
选项,如下所示:
transform(babelify.configure({
ignore: /node_modules/
})
但这并没有帮助。
据我所知,我正在使用最新的软件包,这意味着:
"babelify": "^6.3.0",
"browserify": "^11.2.0",
"react": "^0.14.0"
在节点 v4.1.0 上。有人有什么想法吗?无论如何,请分享。
附注 Here如果有人有时间并想仔细查看,则可以找到该存储库的链接。或者,也许,测试构建时间。
最佳答案
这是因为 React 需要一些东西,这意味着你的 browserify 必须遍历更多节点。
改进这一点的一种方法是预捆绑 React。然而,这只会改进 React 库,添加另一个库,它会再次变慢。
您可以用来改进重新捆绑的一件事是将 watchify 添加到 browserify 捆绑流程中。
尝试一下
var watchify = require('watchify');
var babelify = require('babelify');
var bundler;
function buildApp () {
bundler = bundler || watchify(browserify({
entries: config.paths.jsx,
extensions: ['.jsx'],
debug: true,
transform: [babelify], //This will allow you to use babel for jsx/es6
cache: {}, // required for watchify
packageCache: {}, // required for watchify
fullPaths: true //You can change this false in production
}))
return bundler
.bundle()
.on('error', onError)
.pipe(source('app.js'))
.pipe(gulp.dest(config.paths.dest));
}
本质上,您需要做的是将 browserify 包装在 watchify 中并添加一些额外的属性(cache、packageCache、fullPaths)
Watchify 将通过缓存捆绑文件来加快重新捆绑过程。
!重要提示
请记住在生产中删除 watchify,除非您的构建过程会因监视您的文件而挂起。
关于reactjs - gulp browserify 捆绑时间太长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33073704/