2

プロジェクトに es7 関数を含めて、fetch await 非同期方法の使用を開始したいと考えています。

私はgulp、browserify、およびbabelify（7.2.0）を使用しています。いくつかのドキュメントを読んでいると、babelifyでes7関数を使用するように言う方法は、この行をbabelify変換に含めていることがわかりました。

optional: ['runtime', 'es7.asyncFunctions']

したがって、私のgulpタスク全体は次のとおりです。

gulp.task('js',function(){



var bundleStream = browserify({

    entries:[config.paths.mainJs],
    debug: true,

    transform: [babelify.configure({
        presets:["es2015","react"],
        optional: ['runtime', 'es7.asyncFunctions']
    })]


}).transform("browserify-shim")
    .bundle()
    .on('error',console.error.bind(console))




bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
   // .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))


});

残念ながら、タスクの実行中に次のエラーが発生します。

「不明なオプション: base.optional ファイルの解析中:」

少しグーグルで調べてみると、babelify 7.xがbabel 6.0を使用していて、どうやらこのオプションのパラメーターはbabel 6.0にはもう存在しないようです。

これを機能させるためにbabelifyバージョンをダウングレードしたくありませんが、代わりにbabelifyのバージョン7にes7関数を含めたいのですが、誰かがそれを行う方法を知っていますか?

そこには多くの情報がないので、どんな助けも非常に高く評価されます

念のため、私の package.json ファイルも見つけてください。

"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
 },
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
 },
"browserify": {
"transform": [
  "browserify-shim"
]
 },
 "browserify-shim": {
   "jquery": "$"
   }
4

1 に答える 1

7 
optional: ['runtime', 'es7.asyncFunctions']

Babel 5 の設定方法でした。Babel 6 を使用しているため、次のようになります。

plugins: ['transform-runtime', 'transform-async-to-generator']

注意すべきことの 1 つは、Babelify を使用して Babel を構成することは推奨されないことです。代わりに、.babelrcアプリケーションのルートに JSON を含むファイルを作成することをお勧めします。

{
  presets:["es2015","react"],
  plugins: ['transform-runtime', 'transform-async-to-generator']
}

とnpm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator

于 2016-01-09T20:17:37.330 に答える