Cómo utilizar ‘babel-plugin-angularjs-annotate’ en GULP

21 Jul, 2023 Programación 0

Estoy obteniendo este error cuando intento construir con GULP.

[18:48:23] ‘makeScripts’ dio error después de 2.53 s
[18:48:23] Error en el complemento “gulp-ng-annotate”
Mensaje:
metisMenu.js: error: no se pudo procesar la fuente debido a un error de análisis
Token inesperado (113:8)
Detalles:
domainEmitter: [object Object]
domain: [object Object]
domainThrown: false

Parece ser debido a este tipo de sintaxis en metisMenu.js:

class MetisMenu {
    // eslint-disable-line no-shadow
    constructor(element, config) {
      this.element = element;
      this.config = {
        ...Default,
        ...config,
      };

Que parece ser la sintaxis ES6.

En mi archivo de gulp estoy usando esto, lo cual descubrí que está obsoleto:

var ngAnnotate = require('gulp-ng-annotate');

Así que estoy usando esto en su lugar:

var ngAnnotateNew = require('babel-plugin-angularjs-annotate');

Sin embargo, si simplemente reemplazo ngAnnotate con ngAnnotateNew aquí, obtengo un error: “dest.on no es una función”.

stream = stream
.pipe(ngAnnotateNew())
.pipe(concat(name + '.min.js'));

Todos los ejemplos que he visto para usar el nuevo complemento utilizan un archivo babel.rc, pero no tengo dicho archivo. Solo estoy usando gulp junto con AngularJS/NPM, etc.

Gracias de antemano.

davy.ai

July 21, 2023 at 6:16 am

El error que estás obteniendo parece estar relacionado con el uso de la sintaxis de es6 en metisMenu.js. Específicamente, el error menciona un token inesperado, lo cual probablemente sea causado por el operador de expansión (…) utilizado en el constructor.

Para solucionar este problema, puedes intentar utilizar un transpilador como Babel para convertir la sintaxis de es6 a es5. Esto se puede lograr utilizando el complemento babel-plugin-transform-object-rest-spread, que brinda soporte para el operador de expansión.

En cuanto al problema con ngAnnotate, parece que el antiguo complemento ha sido descontinuado y reemplazado por el complemento babel-plugin-angularjs-annotate. Sin embargo, simplemente reemplazar ngAnnotate por ngAnnotateNew en tu archivo gulpfile está causando un error porque el nuevo complemento no tiene la misma API que el antiguo.

Para solucionar este problema, debes modificar la función ngAnnotateNew para que devuelva un flujo through2 que pueda ser enlazado a la función concat. Esto se puede hacer de la siguiente manera:

var through2 = require('through2');
var ngAnnotateNew = require('babel-plugin-angularjs-annotate');

function annotate() {
  return through2.obj(function(file, enc, cb) {
    if (file.isNull()) {
      return cb(null, file);
    }

    if (file.isStream()) {
      return cb(new Error('La transmisión no es compatible'));
    }

    var annotated = ngAnnotateNew(file.contents.toString(), { /* opciones */ });
    file.contents = new Buffer(annotated);
    cb(null, file);
  });
}

stream = stream
  .pipe(annotate())
  .pipe(concat(name + '.min.js'));

Esta función lee el archivo de entrada, aplica el complemento ngAnnotateNew y devuelve un flujo through2 que puede ser enlazado a la función concat.

Ten en cuenta que necesitarás configurar el complemento ngAnnotateNew con las opciones adecuadas basadas en tu código base. Estas opciones se pueden pasar como un objeto a la función ngAnnotateNew.

Finalmente, si no tienes un archivo .babelrc en tu proyecto, aún puedes usar Babel creando un objeto de configuración y pasándolo a la función babel.transform:

var babel = require('babel-core');

var options = {
  presets: [
    ['env', {
      targets: {
        browsers: ['last 2 versions', 'safari >= 7']
      }
    }]
  ],
  plugins: [
    'angularjs-annotate',
    'transform-object-rest-spread'
  ]
};

function transpile() {
  return through2.obj(function(file, enc, cb) {
    if (file.isNull()) {
      return cb(null, file);
    }

    if (file.isStream()) {
      return cb(new Error('La transmisión no es compatible'));
    }

    var transpiled = babel.transform(file.contents.toString(), options).code;
    file.contents = new Buffer(transpiled);
    cb(null, file);
  });
}

stream = stream
  .pipe(transpile())
  .pipe(concat(name + '.min.js'));

Esta función utiliza un enfoque similar a la función annotate, pero aplica Babel en lugar de ngAnnotateNew. El objeto options especifica los complementos y ajustes predefinidos a utilizar con Babel, y puede ser personalizado según sea necesario.

¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.

Answer

davy.ai

July 21, 2023 at 6:16 am
El error que estás obteniendo parece estar relacionado con el uso de la sintaxis de es6 en metisMenu.js. Específicamente, el error menciona un token inesperado, lo cual probablemente sea causado por el operador de expansión (…) utilizado en el constructor.

Para solucionar este problema, puedes intentar utilizar un transpilador como Babel para convertir la sintaxis de es6 a es5. Esto se puede lograr utilizando el complemento babel-plugin-transform-object-rest-spread, que brinda soporte para el operador de expansión.

En cuanto al problema con ngAnnotate, parece que el antiguo complemento ha sido descontinuado y reemplazado por el complemento babel-plugin-angularjs-annotate. Sin embargo, simplemente reemplazar ngAnnotate por ngAnnotateNew en tu archivo gulpfile está causando un error porque el nuevo complemento no tiene la misma API que el antiguo.

Para solucionar este problema, debes modificar la función ngAnnotateNew para que devuelva un flujo through2 que pueda ser enlazado a la función concat. Esto se puede hacer de la siguiente manera:
```
var through2 = require('through2');
var ngAnnotateNew = require('babel-plugin-angularjs-annotate');

function annotate() {
  return through2.obj(function(file, enc, cb) {
    if (file.isNull()) {
      return cb(null, file);
    }

    if (file.isStream()) {
      return cb(new Error('La transmisión no es compatible'));
    }

    var annotated = ngAnnotateNew(file.contents.toString(), { /* opciones */ });
    file.contents = new Buffer(annotated);
    cb(null, file);
  });
}

stream = stream
  .pipe(annotate())
  .pipe(concat(name + '.min.js'));
```
Esta función lee el archivo de entrada, aplica el complemento ngAnnotateNew y devuelve un flujo through2 que puede ser enlazado a la función concat.

Ten en cuenta que necesitarás configurar el complemento ngAnnotateNew con las opciones adecuadas basadas en tu código base. Estas opciones se pueden pasar como un objeto a la función ngAnnotateNew.

Finalmente, si no tienes un archivo .babelrc en tu proyecto, aún puedes usar Babel creando un objeto de configuración y pasándolo a la función babel.transform:
```
var babel = require('babel-core');

var options = {
  presets: [
    ['env', {
      targets: {
        browsers: ['last 2 versions', 'safari >= 7']
      }
    }]
  ],
  plugins: [
    'angularjs-annotate',
    'transform-object-rest-spread'
  ]
};

function transpile() {
  return through2.obj(function(file, enc, cb) {
    if (file.isNull()) {
      return cb(null, file);
    }

    if (file.isStream()) {
      return cb(new Error('La transmisión no es compatible'));
    }

    var transpiled = babel.transform(file.contents.toString(), options).code;
    file.contents = new Buffer(transpiled);
    cb(null, file);
  });
}

stream = stream
  .pipe(transpile())
  .pipe(concat(name + '.min.js'));
```
Esta función utiliza un enfoque similar a la función annotate, pero aplica Babel en lugar de ngAnnotateNew. El objeto options especifica los complementos y ajustes predefinidos a utilizar con Babel, y puede ser personalizado según sea necesario.

¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo utilizar ‘babel-plugin-angularjs-annotate’ en GULP

Answer

davy.ai