我正在尝试在Gulp构建系统中使用Vue单个文件组件。
Gulp应该使用Vueify和Babel来转换文件,但是它们都不在转换箭头功能。
package.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();
});
myPage.vue
<script>
module.exports = {
data: ()=>{
return {};
}
}
</script>
myPage.min.js中的输出
module.exports = {
data: ()=>{
return {};
}
}
请注意,箭头功能未转换。