gulpでES 6環境を構築する

最近、会社の古いプロジェクトで特性をつけたとき、ES 6でフロントエンドコードを書かなくても卵が痛くないことに気づき、プロジェクトにES 6を導入することにしました.会社はもともとgulpで構築した開発環境を用いていたので,gulp環境でbabelを導入する方法をまとめた.まずgulpプラグインを4つインストールします.

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install babel-core --save-dev
npm install gulp-babel --save-dev
npm install gulp-remove-use-strict  //             ，          

gulpfile.jsファイルに次のコードを追加します.

//es6 es5       
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env', {
            "sourceType": "script"
        }],
        "plugins": [
            "transform-remove-strict-mode"
        ]
    }))
    .pipe(removeUseStrict())
    .pipe(gulp.dest('./app/js/viewsdist'))
});

//es6 es5     
gulp.task('babel',function(){
    gulp.src(['app/js/views/**.js'])   
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./app/js/viewsdist'))
});

ここで,srcの後ろの配列はES 6ファイルが格納された経路,gulp.destの後ろに出力経路が続く.コマンドラインにgulp babelを入力すると、出力ディレクトリに結果が表示されます.ツッコミを入れるのはgulp-remove-use-strictというプラグインの公式サイトの例に従って一度打っても効果がない以上、私を半日振り回しました!!!