ホームページ  >  記事  >  ウェブフロントエンド  >  ES6 コードを ES5 に変換する

ES6 コードを ES5 に変換する

PHPz
PHPzオリジナル
2017-04-04 10:32:163077ブラウズ

この記事では、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。