如何在 javascript 文件中使用 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>
        )
      }]

})

我的gulpfile.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 tag to es2015可以解决问题。您需要安装依赖项：

yarn add babel-preset-vue-app -D

gulpfile.js:

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

如何在 javascript 文件中使用 Gulp 构建 vue 组件标签

How can I use Gulp build vue component tag in the javescript file

vue.js

gulp

gulp-uglify