ホームページ > 記事 > ウェブフロントエンド > ES6 コードを ES5 に変換する
この記事では、Gulp と Babel 6 を使用して ES6 コードを ES5 コードに変換する方法を紹介します。
他のツールを使用して Babel を操作する場合は、ここを参照してください。ガルプが何なのか知りませんか?まずはGulp スタートガイドをご覧ください。
npm install -g gulpプロジェクトで使用するGulpをインストールする
npm install --save-dev gulpGulpにBabelプラグインをインストールする
npm install --save-dev gulp-babelES6をES5に変換するBabelプラグインをインストールする
npm install --save-dev babel-preset-es20152. Gulp gulp
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 サイトの他の関連記事を参照してください。