Browserify, Babel 6, Gulp - Несподіваний маркер оператора розповсюдження


75

Я намагаюся змусити свій Browserify / Babelify / Gulp працювати в моєму проекті, але це не потребує оператора поширення.

Я отримав цю помилку з мого 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]

Це мій 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']);

Я намагався створити файл .babelrc, але він робить те саме. І мій сценарій працює, коли я видаляю оператор поширення.

Це файл, в якому виникає Несподіваний маркер (досить просто).

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;

  }
}

Я не знаю, що в цьому не працює, я читав деякі проблеми на Github та сторінку налаштування на веб-сайті Babel, але я не можу змусити це працювати належним чином.

Хто-небудь може показати мені, як з цим правильно поводитися? Дякую

Відповіді:


167

Цей синтаксис є запропонованим експериментальним синтаксисом на майбутнє, він не є частиною es2015або, reactтому вам потрібно буде його ввімкнути.

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

і додати

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

в .babelrcпаралельно існуючої presets.

Або:

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

і використовуйте stage-3у своїх пресетах, щоб увімкнути всі експериментальні функції етапу 3.


@MikeBoutin loganfsmyth Ви могли б вказати, де вказати його як попередньо встановлений? У мене така сама проблема, хоча я використовую babelify через cli. Дякую
Battle_Slug

Через CLI вам потрібен файл .babelrc, а пресети знаходяться на сторінці плагінів на сайті babeljs
Mike

2
В даний час його етап 3! : D
Кірк Штробек,

npm install --save-dev babel-preset-stage-3 і presets: ["stage-3"]зробив це для мене.
theisof

21

У мене була та ж проблема, я встановив плагін stage-2 і змінив файл package.json, який виглядає нижче

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

3

Подібно ...до допоміжної примітки, деякі текстові редактори (у моєму випадку Mac Notes) укладуть контракт на сутність elepsis, яка не зможе перевірити, тому пам'ятайте про це теж ...


Це не мій текстовий редактор. Це просто десь час від часу я скидаю блоки коду. : D
user1775718

2
Варто зазначити, що різні продукти, включаючи продукти Microsoft та такі речі, як слабкість, часто вставляють власні спеціальні символи форматування (які часто приховані) та / або перетворюють певні символи для зовнішнього вигляду. Це може бути дуже складно помітити і може викликати у вас проблеми ...
user1775718
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.