2015-12-14 172 views
14

我想同時使用Browserify和Babel與我的JavaScript。爲此,我創建了一個大口的任務Browserify和Babel吞噬任務

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(babel({ presets: ['es2015'] })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

不幸的是,當我想我的代碼中使用import,我得到一個錯誤:

ParseError: 'import' and 'export' may only appear at the top level 

我主要的js文件是非常簡單的:

import 'directives/toggleClass'; 

我猜這是因爲巴貝爾(它的use strict除外),但我能做什麼?

+1

是否改變順序(在browserify之前放置babel),有幫助嗎? – JCOC611

+0

不,我試過了,刪除'babel'也沒有幫助。 –

+0

不是答案,而是您是否嘗試使用https://github.com/babel/babelify? – Misiur

回答

10

Babel對Browserify進行官方轉換,調用babelify,如果使用babel和browserify,應儘可能使用它。

直接刪除babel的使用,並將babelify作爲browserify的轉換插件。有許多方法可以配置browserify,但在您的package.json中指定配置可能是最簡單的。

你一飲而盡任務將被簡化

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

Browserify也暴露的方法來做到這一點編程,所以你就可以從你的一口任務(丟棄包配置中配置的捆綁,雖然使用軟件包對此非常合適),檢查他們的文檔和實驗,我之前完成了它,但從我使用gulp開始已經很長時間了(在這裏使用gulp只是一個你不需要的併發症,但我希望你正在使用它在你的構建管道中的其他地方可能更有幫助)。