Vueify:'import'和'export'可能只出现'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' and 'export' may appear only with 'sourceType: module'

有没有办法修改gulp文件来使用我的.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') );