¿Cómo puedo usar Gulp para construir la etiqueta de componente vue en el archivo JavaScript?

Quiero usar Gulp para construir el archivo que es un archivo de JavaScript. El archivo fue importado a los archivos Vue.

El código objetivo es así:

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

Mi gulpfile.js es así:

gulp.task('cover', () => { gulp .src('./dist/const/**/const.js') .pipe( babel({ presets: ['es2015'], }) ) .pipe(gulp.dest('./dist/compress')) .pipe( uglify({ mangle: true, compress: true, }) ) .pipe(gulp.dest('./myProject/')) }) El proceso de construcción de Gulp muestra este mensaje: Unexpected token (68:10) 66 | // 67 | return ( > 68 | <a |="" ^="" 69="" |="" onclick="{()" ==""> { 70 | _this.handleDetail(record) 71 | }}

El mensaje de salida es obvio en el progreso de gulp-uglify y se debe a que el archivo usó la etiqueta de componente Vue <a>. Necesito construir el archivo. ¿Qué debo hacer? ¡Por favor!

davy.ai

June 5, 2023 at 10:42 pm

Para solucionar el problema causado por gulp-uglify, necesitamos excluir la función myOrderTable del proceso. Una forma de hacer esto es usar el complemento gulp-ignore y excluir el archivo de la función del proceso de gulp-uglify.

Así es como puede modificar el gulpfile.js para excluir el archivo const.js que contiene la función myOrderTable:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const ignore = require('gulp-ignore');

gulp.task('cover', () => {
  gulp.src('./dist/const/**/const.js')
    .pipe(ignore.exclude('**/myOrderTable.js')) // Excluir archivo con función
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist/compress'))
    .pipe(uglify({
        mangle: true,
        compress: true
    }))
    .pipe(gulp.dest('./myProject/**/'));
});

Con la modificación anterior, el archivo que contiene la función myOrderTable no se someterá a minificación y obturación.

Sin embargo, tenga en cuenta que excluir el archivo específico puede no ser la mejor aproximación ya que puede haber otros componentes Vue en el mismo archivo que requieran minificación. Como alternativa, puede dividir la función myOrderTable en un archivo separado y excluir ese archivo en el proceso gulp-uglify.

Answer

davy.ai

June 5, 2023 at 10:42 pm
Para solucionar el problema causado por gulp-uglify, necesitamos excluir la función myOrderTable del proceso. Una forma de hacer esto es usar el complemento gulp-ignore y excluir el archivo de la función del proceso de gulp-uglify.

Así es como puede modificar el gulpfile.js para excluir el archivo const.js que contiene la función myOrderTable:
```
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const ignore = require('gulp-ignore');

gulp.task('cover', () => {
  gulp.src('./dist/const/**/const.js')
    .pipe(ignore.exclude('**/myOrderTable.js')) // Excluir archivo con función
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist/compress'))
    .pipe(uglify({
        mangle: true,
        compress: true
    }))
    .pipe(gulp.dest('./myProject/**/'));
});
```
Con la modificación anterior, el archivo que contiene la función myOrderTable no se someterá a minificación y obturación.

Sin embargo, tenga en cuenta que excluir el archivo específico puede no ser la mejor aproximación ya que puede haber otros componentes Vue en el mismo archivo que requieran minificación. Como alternativa, puede dividir la función myOrderTable en un archivo separado y excluir ese archivo en el proceso gulp-uglify.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo usar Gulp para construir la etiqueta de componente vue en el archivo JavaScript?

Answer

davy.ai