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

【问题标题】：How can I use Gulp build vue component tag in the javescript file如何在 javascript 文件中使用 Gulp 构建 vue 组件标签
【发布时间】：2021-11-26 09:36:36
【问题描述】：

我想使用 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 |             }}

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

我需要构建文件。那我该怎么办？拜托！

【问题讨论】：

标签： vue.js gulp gulp-uglify

【解决方案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'],
      })
    )

【讨论】：