gulp - 验证 : 'import' and 'export' may appear only with 'sourceType: module'

Question

我正在使用 Vue。这就是我在 gulpfile 中构建的方式:

browserify('./main.js')
.transform(vueify)
.bundle()
.pipe( fs.createWriteStream('./build/bundle.js') );

问题是 vueify 不处理我的 .js 文件中的 es6 导出。它仅适用于 .vue 组件。它适用于 module.exports，但我想在我的 .js 文件中利用 es6 代码。

当 bundle() 被调用时，我目前得到错误:

'import' 和 'export' 可能只与 'sourceType: module' 一起出现

有没有办法修改 gulpfile 以使用我的 .vue 组件正在导入的 es6 处理 js 文件？

Answer 1

经过几个小时的挣扎，我终于弄明白了。

1. 安装 babelify:npm install --save-dev babelify
2. 将此添加到您的 gulpfile 的顶部:var babelify = require( 'babelify' );

3. 添加.transform(babelify):

   return browserify('./main.js') //tells browserify where to start, but doesn't run the resolve algorithm yet
   .transform( vueify ) //executes vueify to transform vue components to js
   .transform( babelify ) //executes babelify to transform es6 to es5
   .bundle() //runs the module resolve algorithm on all the require() statements      
   .pipe( fs.createWriteStream('./build/bundle.js') );