如何在javescript文件中使用Gulp构建vue组件标记

Question

我想使用Gulp构建该文件是一个javescript。该文件已导入Vue文件。

目标代码如下：

export const myOrderTable = (h, _this) => {
return [
{
title: 'orderNo',
align: 'center',
dataIndex: 'orderNo',
fixed: 'left',
ellipsis: true,
customRender: (text, record) => {
return (
<a
onClick={() => {
_this.handleDetail(record)
}}
>
{{ text }}
</a>
)
}]
})

我的gullfile.js是这样的：

gulp.task('cover', () => {
gulp
.src('./dist/const/**/const.js')
.pipe(
babel({
presets: ['es2015'],
})
)
// .pipe(jsx())
// .transform('babelify', { presets: ['es2015', 'vue'] })
.pipe(gulp.dest('./dist/compress'))
.pipe(
uglify({
mangle: true,
compress: true,
//preserveComments: 'all'       
})
)
.pipe(gulp.dest('./myProject/**/'))
})

Gulp构建过程输出：

Unexpected token (68:10)
66 |         // 
67 |         return (
> 68 |           <a
|           ^
69 |             onClick={() => {
70 |               _this.handleDetail(record)
71 |             }}

optput消息在gulp-uglify进程中很明显，并且由于文件使用了vue组件<a>标记。

我需要建立文件。那我该怎么办请

Answer 1

使用babel transform-vue标记到es2015可以解决问题。您需要安装依赖项：

yarn add babel-preset-vue-app -D

gullfile.js:

gulp
.src('./dist/const/**/const.js')
.pipe(
babel({
presets: ['es2015','vue-app'],
})
)