ES6 コードを ES5 に変換する

この記事では、Gulp と Babel 6 を使用して ES6 コードを ES5 コードに変換する方法を紹介します。

他のツールを使用して Babel を操作する場合は、ここを参照してください。ガルプが何なのか知りませんか？まずはGulp スタートガイドをご覧ください。

1. 依存関係をインストールする

グローバルGulpをインストールする

npm install -g gulp

プロジェクトで使用するGulpをインストールする

npm install --save-dev gulp

GulpにBabelプラグインをインストールする

npm install --save-dev gulp-babel

ES6をES5に変換するBabelプラグインをインストールする

npm install --save-dev babel-preset-es2015

2. Gulp

gulp

file.jsの内容を

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")// ES6 源码存放的路径
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});

の形式で設定します。 Source

mapを生成したい場合は、gulp-sourcemapsを次の形式で使用します:

var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

3 . Babel 構成

はプロジェクトのルート パス ファイル

に作成されます。内容は .babelrc

{
  "presets": ["es2015"]
}

4.

を変換し、コマンドラインで

gulp

を実行します。完全なコードはここにあります。

---

以上がES6 コードを ES5 に変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。