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

Question

I want use Gulp build the file is a javescript. the file was imported to the Vue files.

The target code like this:

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>
        )
      }]

})

My gulpfile.js like this:

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/**/'))
})

The Gulp build process output:

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

The optput message obvious in the gulp-uglify progress and due to the file used the vue component <a> tag.

I need build the file. so what should I do？please！

Answer 1

Use the babel transform vue tag to es2015 can solve the problem. you need install the dependency:

yarn add babel-preset-vue-app -D

gulpfile.js:

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