Browserify, Babel 6, Gulp-스프레드 연산자에 예기치 않은 토큰

Browserify, Babel 6, Gulp-스프레드 연산자에 예기치 않은 토큰

---

내 프로젝트에서 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 웹 사이트의 설정 페이지에서 몇 가지 문제를 읽었지만 올바르게 작동하도록 만들 수 없습니다.

누구든지 이것을 올바르게 처리하는 방법을 보여줄 수 있습니까? 감사합니다

---

그 구문은의 일부가 아닌, 미래를위한 실험적인 제안 구문 es2015또는 react당신이 그것을 사용하도록 설정해야합니다 그래서.

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

그리고 추가

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

에 .babelrc함께 당신의 기존 presets.

Alternatively:

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

and use stage-3 in your presets to enable all stage-3 experimental functionality.

---

I had the same issue, installed stage-2 plugin and modified my package.json file, which looks like below

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

---

Just as a side note, some text editors (in my case Mac Notes) will contract ... into an elepsis entity, which will fail validation, so be aware of that too...

참고URL : https://stackoverflow.com/questions/33745118/browserify-babel-6-gulp-unexpected-token-on-spread-operator