Vueify：“导入”和“导出”只能与“sourceType:模块”一起出现

Question

我在用Vue。我就是这样在我的档案里建立的：

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

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

当调用bundle()时，我当前得到了错误：

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

是否有任何方法修改are文件以使用我的es6组件正在导入的js文件来处理js文件？

Answer 1

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

1. 安装babelify：npm install --save-dev babelify
2. 将这个添加到您的吞咽文件的顶部：var babelify = require( 'babelify' )；
3. 添加.transform( babelify )： 返回browserify('./main.js') /告诉browserify从何处开始，但尚未运行解决算法.transform( vueify )//执行vueify来将vue组件转换为js .transform( babelify )//执行babelify以将es6转换为es5 .bundle() //在所有require()语句.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>

我的bundle命令如下：

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

在编译过程中，我得到了OP声明的错误：

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

我采取的步骤包括：

1. 安装babel-core：npm install --save-dev babel-core
2. 安装babelify (per OP)：npm install --save-dev babelify
3. 安装bable-预设-s 2015：npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
4. 重新运行browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js

Voila!现在import指令生效了，Axios很高兴。

回想起来，它一开始不起作用的原因有点明显(没有对更新的Javascript语法进行映射)，但我当然希望这能帮助其他人交付业务价值，而不是花费太多时间在库管理上。