Articles of gulp babeljs

尝试在Windows上使用Gulp和Babel来分离Node.js进程

我的应用程序是用同构JavaScript构build的,我使用Gulp任务在新实例上运行Node.js服务器,然后侦听文件更改以重新启动服务器并重新加载浏览器(使用Browsersync )。 我想使用Babel在ECMAScript 6中编写我的服务器端代码,以及我的客户端代码。 我想避免使用Babel node_modules/.bin/babel-core.cmd server.js ,而是使用node_modules/.bin/babel-core.cmd server.js命令,但是child_process.fork()只允许执行一个可执行文件: let child = cp.fork('server.js', [], { execPath: path.normalize('node_modules/.bin/babel-node.cmd'), env: _.assign({NODE_ENV: 'development'}, process.env) }); 此脚本不起作用,并按照预期引发以下错误: child_process.js:588 p.open(fd); ^ Error: EINVAL, invalid argument at Error (native) at Object.exports._forkChild (child_process.js:588:5) at Function.startup.processChannel (node.js:704:10) at startup (node.js:59:15) at node.js:814:3 我想使用child_process.fork()来处理这种情况。 child_process.spawn()在这里不起作用,因为两个Node.js进程之间没有直接的通信。 我正在听事件来执行操作: // server.js server.listen(port, function() { if (process.send) { […]

React-Starterify Project在Windows电脑上,babel无法正常工作

我刚刚开始学习如何使用React框架,并且一直关注YouTube上的LevelUpTuts频道。 在他们的React播放列表的video7中,他们使用了这个(我猜是样板)的项目叫做React-Starterify。 他让它看起来很容易安装在他的Mac上,但是我在窗户上,它正在变成一个完整的噩梦。 这是该项目: https : //github.com/Granze/react-starterify 我已经按照确切的步骤,但是当我做整个“npm跑表”。 > react-starterify@2.1.3 watch K:\IT Projects\ReactTutes\MailingList\react-starterify-2.1.4 > gulp watch [13:40:11] Requiring external module babel-core/register K:\IT Projects\ReactTutes\MailingList\react-starterify-2.1.4\gulpfile.babel.js:108 var opts = Object.assign({}, _watchify2.default.args, customOpts); ^ TypeError: undefined is not a function at Object.<anonymous> (gulpfile.babel.js:39:21) at Module._compile (module.js:460:26) at loader (K:\IT Projects\ReactTutes\MailingList\react-starterify-2.1.4\node_modules\babel-core\node_modules\babel-register\lib\node.js:130:5) at Object.require.extensions.(anonymous function) [as .js] (K:\IT Projects\ReactTutes\MailingList\react-starterify-2.1.4\node_modules\babe l-core\node_modules\babel-register\lib\node.js:140:7) at […]

使用Babel.js和concat和gulp生成的源地图是不正确的

我使用gulp将Babel 6转换成JS,然后把所有的文件(没有任何uglify,只join文件)连接起来。 然而,为了让我debugging应用程序,我需要正确的源地图,特别是从Babel转换的代码。 不幸的是,源代码地图从来不是正确的,因为像浏览器上的断点(例如Chrome或Firefox)与真实代码不匹配。 我在gulp上使用下面的代码: return gulp.src( [].concat( FOLDERS.SOURCE.LIBS, FOLDERS.SOURCE.MODULES, FOLDERS.SOURCE.APP ) , {base: __dirname}) .pipe( plumber() ) .pipe( sourcemaps.init({loadMaps: true}) ) .pipe( gulpif ( notLib, babel( { presets: [ 'es2015', 'stage-3' ], sourceMaps: "both" } ) ) ) .pipe( replace("'use strict';", "")) .pipe( concat( FOLDERS.TARGET.DEVELOPMENT, { newLine: ';' } ) ) .pipe( sourcemaps.write( './', […]

为什么用“ – ”(短划线)给Babelify上的“Gulp”给出“意外的标记错误”?

我正在使用Browserify和Babelify设置(或实际上修改现有的)项目。 出于某种原因,我无法正确configuration我的gulp文件。 如果问题很重要的话,这个项目本身就是一个React项目。 我摆脱了大部分问题,但是现在我在Browserify上收到了“意外的令牌”错误。 它是由React组件或带有属性名称的html元素引起的。 下列: <button type="button" data-toggle="collapse"> 我的Browserify任务: gulp.task('browserify', function() { browserify('./src/js/main.js') .transform(babelify.configure({ presets: ["react", "es2015"] })) .bundle() .on('error', function(err){ process.stdout.write('' + err + '\n'); notifier.notify({ title: 'Error', message: err, sound: true, wait: true }, function (err, response) { }); }) .pipe(source('main.js')) .pipe(gulp.dest('dist/js')) .pipe(connect.reload()); }); 的package.json: { "name": "srcd-mockup", "version": "1.0.0", "description": "", […]

在Gulp Browserify中的标准错误日志

有了这个任务: gulp.task("es6", function () { return browserify({entries: 'src/main/es6/main.js', extensions: ['.js'], debug: true}) .transform(babelify) .bundle() .pipe(source('superpos.js')) .pipe(streamify(uglify())) .pipe(gulp.dest('src/main/webapp')); }); 我得到这种错误日志: 这很清楚,很漂亮,我喜欢。 但为了保持我的手表运行,我需要处理的错误,而不是让它通过,像 … .transform(babelify) .bundle() .on('error', function(error){ // pretty error print this.emit('end'); }) … 我怎样才能在这里重现相同的错误日志? 我宁愿避免通过结合粉笔,拼写和阅读错误文件来痛苦地复制它,但是要以某种方式使用相同的function。

大嘴巴es2015变换非常缓慢

我正在尝试使用gulp在我的JavaScript上运行babel-preset-es2015,但是即使在一行代码中,它也需要永久使用。 我最初尝试用我的脚本包大约700位,然后用一个虚拟脚本,是1行。 第一种情况大约需要9s – 1行我需要8.38s。 这是我的确切设置: 的package.json: { "devDependencies": { "gulp": "^3.9.0", "gulp-babel": "^6.1.1", "babel": "^6.3.26", "babel-preset-es2015": "^6.3.13" }, "babel": { "presets": [ "es2015" ] } } gulpfile.js: gulp.task('js', function () { return gulp.src('dummyscript.js') .pipe(concat('site.bundle.js')) .pipe(babel()) .pipe(gulp.dest(paths.dest.scripts)); }); dummy.js: console.log('dummy script'); 我正在运行节点v4.2.4和npm v2.14.12。 其他操作,如吞咽反应和吞咽污染都需要大约180毫秒的时间。 到底是怎么回事?