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'

有什么方法可以修改 gulpfile 以使用我的 .vue 组件正在导入的 es6 处理 js 文件吗？

Answer 1

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

安装babelify：npm install --save-dev babelify
将此添加到您的 gulpfile 的顶部：var babelify = require( 'babelify' )；

添加.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') );

Answer 2

好的，我已经运行这几天试图让 Axios 与 Vue 一起工作，OP 的 self-answer 救了我 。话虽这么说，我还没有使用 Gulp 并且不得不执行几个不同的步骤。

我的问题实际上是 import 命令。在 Browserify compile 期间会出错，在运行时会发生错误 axios is undefined。

我的.vue文件的脚本部分如下：

<script>
  import axios from 'axios';

  module.exports = {
    name: "address-search",
    data: function() {
      return {
        valid: false,
        hash: '',
        errors: []
      }
    },
    methods: {
      async validateAddress() {
        const query = `./validateAddress/` + this.hash;      
        try {
          const response = await axios.get(query);
          this.valid = response.data;
        } catch (e) {
          this.errors.push(e)
        }
      }
    }
  }
</script>

我的bundle命令如下：

browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js

在编译期间，我收到了 OP 指出的错误：

'import' and 'export' may appear only with 'sourceType: module'

我采取的步骤包括：

安装 babel-core：npm install --save-dev babel-core
安装 babelify（根据 OP）：npm install --save-dev babelify
安装bable-preset-es2015:npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
重新运行browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js

瞧！现在 import 指令有效，Axios 很高兴。

回想起来，它一开始不起作用的原因有点明显（没有映射到较新的 Javascript 语法），但我当然希望这能帮助其他人交付商业价值，而不是在图书馆管理上花费太多时间。

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

Vueify: 'import' and 'export' may appear only with 'sourceType: module'

browserify

ecmascript-6

gulp

vue.js

babeljs