1

我正在尝试将 Vue 单文件组件与 Gulp 构建系统一起使用。

Gulp 应该使用 Vueify 和 Babel 转换文件，但它们都没有转换箭头函数。

包.json

{
  "dependencies": {
    "@babel/cli": "7.4.4",
    "@babel/core": "7.4.5",
    "@babel/plugin-transform-arrow-functions": "7.2.0",
    "@babel/plugin-transform-runtime": "7.4.4",
    "@babel/preset-env": "7.5.2",
    "@babel/runtime": "7.5.2",
    "@vue/babel-preset-app": "3.7.0",
    "babelify": "10.0.0",
    "browserify": "16.2.3",
    "core-js": "3.1.4",
    "gulp": "4.0.1",
    "gulp-babel": "8.0.0",
    "gulp-concat": "2.6.1",
    "gulp-jshint": "2.1.0",
    "gulp-nodemon": "2.4.2",
    "gulp-sass": "4.0.2",
    "gulp-sourcemaps": "2.6.5",
    "gulp-uglify": "3.0.2",
    "gulp-watch": "5.0.1",
    "node-sass": "4.11.0",
    "regenerator-runtime": "0.13.2",
    "uglifyify": "5.0.1",
    "vinyl-buffer": "1.0.1",
    "vinyl-source-stream": "2.0.0",
    "vue": "2.6.10",
    "vue-script2": "2.1.0",
    "vueify": "9.4.1"
  },
  "engines": {
    "node": "11.12.0",
    "npm": "6.9.0"
  },
}

gulpfile.js

   gulp.task('script:' + pageName, function(done) {
      var b = browserify(__dirname + '/public/js/vue/entry/'+pageName+'.js', {
        debug: true, standalone: 'Bundle'
      });
      return b
        .transform(vueify)
        .transform('babelify', {
          presets: ['@babel/preset-env', '@vue/babel-preset-app'],
          plugins: ['@babel/plugin-transform-arrow-functions'] 
        })
        .bundle()
        .pipe(source(pageName + '.min.js'))
        .pipe(buffer())
        .pipe(gulp.dest(paths.js.output));
      done();
    });

我的页面.vue

<script>
  module.exports = {
    data: ()=>{
      return {};
    }
  }
</script>

myPage.min.js 中的输出

module.exports = {
  data: ()=>{
    return {};
  }
}

请注意箭头函数没有被转换。

4

0 回答 0