web-dev-qa-db-ja.com

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のWebサイトのセットアップページでいくつかの問題を読みましたが、正しく機能させることができません。

誰もこれを正しく処理する方法を教えてもらえますか？ありがとうございました

javascriptgulpecmascript-6browserifybabeljs
73
Mike Boutin

この構文は、将来的に実験的に提案された構文であり、es2015またはreactの一部ではないため、有効にする必要があります。

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

そして追加

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

既存のpresetsとともに.babelrcに追加します。

代わりに：

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

プリセットでstage-3を使用して、すべてのステージ3実験機能を有効にします。

159
loganfsmyth

同じ問題があり、stage-2プラグインをインストールし、package.jsonファイルを変更しました。以下のようになります

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

ちょっとした注意として、一部のテキストエディター（私の場合はMac Notes）は...をelepsisエンティティに縮小しますが、検証に失敗します。

3
user1775718