web-dev-qa-db-fra.com

Browserify, Babel 6, Gulp - Jeton inattendu sur un opérateur en propagation

J'essaie de faire en sorte que Browserify/Babelify/Gulp fonctionne dans mon projet, mais cela ne prendra pas l'opérateur de diffusion.

J'ai eu cette erreur de mon gulpfile:

[SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]

C'est mon gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');

gulp.task('build', function () {
  return browserify({entries: './src/client/app.js', extensions: ['.js'], debug: true})
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'));
});

gulp.task('default', ['build']);

J'ai essayé de créer un fichier .babelrc, mais il fait la même chose. Et mon script fonctionne quand je supprime l'opérateur de propagation.

C'est le fichier dans lequel se trouve le jeton inattendu (assez simple).

import utils from '../utils/consts';

const initialState = {
  itemList: [
    {name: 'Apple', type: 'Fruit'},
    {name: 'Beef', type: 'Meat'}
  ]
};

export function groceryList(state = initialState, action = {}) {

  switch(action.type) {

    case utils.ACTIONS.ITEM_SUBMIT:
      return {
        ...state,
        itemList: [
          ...state.itemList,
          {name: action.name, type: action.itemType}
        ]
      };

    default:
      return state;

  }
}

Je ne sais pas ce qui ne fonctionne pas dans cette situation. J'ai lu des numéros sur Github et la page de configuration sur le site Web de Babel, mais je ne peux pas le faire fonctionner correctement.

Quelqu'un peut-il me montrer comment gérer cela correctement? Je vous remercie

javascriptgulpecmascript-6browserifybabeljs
73
Mike Boutin

Cette syntaxe est une syntaxe proposée expérimentale pour le futur, elle ne fait pas partie de es2015 ou react, vous devrez donc l'activer.

npm install --save-dev babel-plugin-transform-object-rest-spread

et ajouter

"plugins": ["transform-object-rest-spread"]

en .babelrc _ à côté de votre presets existant.

Alternativement:

npm install --save-dev babel-preset-stage-3

et utilise stage-3 dans vos préréglages pour activer toutes les fonctionnalités expérimentales de l’étape 3.

159
loganfsmyth

J'ai eu le même problème, installé le plugin stage-2 et modifié mon fichier package.json, qui ressemble à celui ci-dessous

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  }
21
Devnegikec

En guise de remarque, certains éditeurs de texte (dans mon cas, Mac Notes) vont se contracter ... dans une entité elepsis, ce qui échouera à la validation, soyez donc conscient de cela aussi ...

3
user1775718