babelの基本的な使用方法の詳細

babelとは何か63;

babelは強力な多用途のjsコンパイラです。アクセスしてください公式サイト

babelをインストールします

npm install -g babel-cli 
npm install --save-dev babel-cli

babel設定ファイル

.babelrcで表現されます

{
 "presets" : [ ],
 "plugins" : [ ]
}

presetsはプリセットを保存するために使用されます

pluginsはプラグインを保存するために使用されます　

コマンドラインの簡単な使用

私たちは以下のように -o (--out-file) パラメータを使用してファイルをコンパイルします

babel es6.js -o es5.js / babel es6 --out-file es5.js

もし全体のディレクトリをコンパイルしたい場合 -d (}}--out-dir)パラメータ

babel　 src -d build / babel　 src --out-dir build

预设

现在有一段es6的代码，我们想要使用babel来编译这段代码，目前来说通过编译后的代码几乎是原封不动的复制了过来

es6.js

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

我们可以安装babel-preset-es2015来解析es2015的语法

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

然后通过配置.babelrc文件

{
 "]2015这样我们就可以进行对es
}

语法解析了。最后通过配置package.json的scripts2015"":

"scripts": {
 "build" : "babel src -d build -w"
 }

次に、コマンドラインで直接

npm run build

プラグイン

babelにはたくさんのプラグインがあります。例えば、以下の一段のコードをumd形式に変換する方法はどうですか？63;

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

まず、対応するプラグインbabelを見つけます-プラグイン-transform-es2015-modules-umd、このプラグインをインストール

npm install --save-dev babel-プラグイン-transform-es2015-modules-umd

設定にインポート

{
 "presets":["es2015"]
 "plugins":["transform-es2015-modules-umd"]
}

それからコンパイルして、私たちが望むものになります

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 }
 factory(mod, mod.exports);
 global.sum = mod.exports;
 }
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 return a + b;
 }
 exports.default = sum;
 module.exports = exports["default"];
});

gulpの統合

babelは単独で使用できるだけでなく、ビルドツール（gulp webpackなど）と組み合わせて使用することもできます

まずgulpとgulpに対応するbabelプラグインをダウンロードする必要があります

npm install gulp gulp-babel --save-dev

gulpfile.jsの設定を行います

const gulp = require('gulp')
const babel = require('gulp-babel)
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())  
  .pipe(gulp.dest('dist'))
}
gulp.task('default' , ['babel'])

package.jsonのscriptsの設定を行います

"scripts": {
 "dev" : "."/node_modules/.bin/gulp"
 }

最後にコマンドを実行します

npm run dev

これでこの記事の全てです。この記事の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、呐喊チュートリアルのサポートを多くお願いします。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。このサイトは所有権を持ちません。人工編集は行われていません。また、関連する法的責任も負いません。著作権侵害を疑う内容が見つかった場合は、メールを送信して：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。告発を行い、関連する証拠を提供してください。一旦確認がとれましたら、このサイトは即座に侵害される内容を削除します。）