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的自我回答救了我。话虽这么说，我还没有使用Gulp（还），并且必须做几个不同的步骤。

我的问题实际上是使用import命令。在Browserify 编译期间会出错，并且在运行时错误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>

我的包命令如下：

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

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

回想起来，为什么它首先没有工作（没有新的Javascript语法的映射）是有点明显的，但我当然希望这有助于其他人提供商业价值而不是花费太多时间关于图书馆管理。

Vueify：'import'和'export'可能只出现'sourceType：module'

2 个答案: