Vueify：'import'和'export'可能只與'sourceType：module'一起出現

Question

我正在使用Vue。 這是我要建在我gulpfile：

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

問題是vueify不處理ES6出口在我的.js文件。它只適用於.vue組件。它適用於module.exports，但我想利用我的.js文件中的es6代碼。

當bundle()叫，我目前得到的錯誤：

'import' and 'export' may appear only with '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'));