バベルへの短くて簡単なガイド

Babelは、WebDeveloperツールセットのすばらしいエントリです。これは素晴らしいツールであり、かなり前から存在していますが、今日ではほとんどすべてのJavaScript開発者がこのツールに依存しています。これは、Babelが不可欠であり、すべての人にとって大きな問題を解決したためです。

この記事では、現在の安定版リリースであるBabel7について説明します。

バベル入門

Babelは素晴らしいツールであり、かなり前から存在していますが、最近ではほとんどすべてのツールが使用されています。JavaScript開発者はそれに依存しており、バベルは今や不可欠であり、誰にとっても大きな問題を解決しているので、これは続くでしょう。

どの問題？

すべてのWeb開発者が確かに抱えている問題：JavaScriptの機能は、ブラウザーの最新リリースで使用できますが、古いバージョンでは使用できません。あるいは、ChromeやFirefoxがそれを実装しているかもしれませんが、SafariiOSとEdgeは実装していません。

たとえば、ES6は矢印機能：

[1, 2, 3].map((n) => n + 1)

これは現在、すべての最新のブラウザでサポートされています。 IE11もOperaMiniもサポートしていません（どうすればわかりますか？ES6互換性テーブル）。

では、この問題にどのように対処する必要がありますか？先に進んで、古い/互換性のないブラウザを使用している顧客を残しておくべきですか、それともすべてのユーザーを満足させるために古いJavaScriptコードを書くべきですか？

バベルを入力してください。バベルはコンパイラ：ある標準で記述されたコードを受け取り、それを別の標準で記述されたコードに変換します。

最新のES2017JavaScriptをJavaScriptES5構文にトランスパイルするようにBabelを構成できます。

[1, 2, 3].map(function(n) {
  return n + 1
})

これはビルド時に発生する必要があるため、これを処理するワークフローを設定する必要があります。Webpack一般的な解決策です。

（このすべての場合はPSES混乱しているように聞こえますが、ESバージョンの詳細をご覧くださいECMAScriptガイド）

Babelのインストール

Babelは以下を使用して簡単にインストールできますnpm、プロジェクト内でローカル：

npm install --save-dev @babel/core @babel/cli

過去に私はインストールすることをお勧めしましたbabel-cliグローバルに、しかしこれは現在、バベルのメンテナによって推奨されていません。ローカルで使用することにより、プロジェクトごとに異なるバージョンのバベルを使用でき、リポジトリにバベルをチェックインする方がチームワークに適しているためです。

npmが付属しているのでnpx、ローカルにインストールされたCLIパッケージは、プロジェクトフォルダーにコマンドを入力して実行できます。

実行するだけでBabelを実行できます

npx babel script.js

Babel構成の例

Babelは、箱から出してすぐに役立つことは何もしません。構成してプラグインを追加する必要があります。

これがBabelプラグインのリストです

はじめに（すべてのブラウザで矢印関数を使用して）説明した問題を解決するために、次のコマンドを実行できます。

npm install --save-dev \
    @babel/plugin-transform-arrow-functions

でパッケージをダウンロードするにはnode_modulesアプリのフォルダを追加する必要があります

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

に.babelrcアプリケーションのルートフォルダにあるファイル。そのファイルをまだ持っていない場合は、空のファイルを作成し、そのコンテンツをそのファイルに入れるだけです。

ヒント：ドットファイル（ドットで始まるファイル）を一度も見たことがない場合、そのファイルは隠しファイルであるため、ファイルマネージャーに表示されない可能性があるため、最初は奇妙な場合があります。

今私たちが持っている場合script.jsこのコンテンツを含むファイル：

var a = () => {};
var a = (b) => b;
const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
console.log(bob.printFriends());

ランニングbabel script.js次のコードを出力します。

var a = function () {};var a = function (b) {
  return b;
};
const double = [1, 2, 3].map(function (num) {
return num * 2;
});console.log(double); // [2,4,6]

var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
var _this = this;
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_friends</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">f</span>) {
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">_name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">" knows "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">f</span>);
});
}
};
console.log(bob.printFriends());

ご覧のとおり、矢印関数はすべてJavaScriptES5関数に変換されています。

Babelプリセット

前回の記事で、特定のJavaScript機能をトランスパイルするようにBabelを構成する方法を見ました。

プラグインをさらに追加することはできますが、構成機能に1つずつ追加することはできず、実用的ではありません。

これがバベルが提供する理由ですプリセット。

最も人気のあるプリセットはenvそしてreact。

ヒント：Babel 7は、次のような毎年のプリセットを廃止（および削除）しましたpreset-es2017、およびステージプリセット。使用する@babel/preset-env代わりに。

`env`プリセット

ザ・envプリセットは非常に優れています。サポートする環境を指定すると、すべてが実行されます。最新のJavaScript機能をすべてサポート。

たとえば、「すべてのブラウザの最新の2つのバージョンをサポートしますが、Safariの場合は、Safari7以降のすべてのバージョンをサポートしましょう」

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

または「ブラウザのサポートは必要ありません。Node.js6.10インチ

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

`react`プリセット

ザ・reactプリセットは、Reactアプリを作成するときに非常に便利です。preset-flow、syntax-jsx、transform-react-jsx、transform-react-display-name。

これを含めることで、JSXトランスフォームとFlowサポートを備えたReactアプリの開発に取り掛かることができます。

プリセットの詳細

https://babeljs.io/docs/plugins/

WebpackでBabelを使用する

最新のJavaScriptをブラウザーで実行する場合は、Babelだけでは不十分であり、コードをバンドルする必要もあります。 Webpackはこれに最適なツールです。

ヒント：webpackガイドwebpackに慣れていない場合

最新のJSには、コンパイル段階と実行時段階の2つの異なる段階が必要です。これは、一部のES6 +機能にポリフィルまたはランタイムヘルパーが必要なためです。

Babel polyfillランタイム機能をインストールするには、

npm install @babel/polyfill \
            @babel/runtime \
            @babel/plugin-transform-runtime

今あなたのwebpack.config.jsファイルの追加：

entry: [
  'babel-polyfill',
  // your app scripts should be here
],
module: {
loaders: [
// Babel loader compiles ES2015 into ES5 for
    // complete cross-browser support
    {
loader: ‘babel-loader’,
test: /.js$/,
// only include files present in the src subdirectory
      include: [path.resolve(__dirname, “src”)],
// exclude node_modules, equivalent to the above line
      exclude: /node_modules/,
query: {
// Use the default ES2015 preset
        // to include all ES2015 features
        presets: [‘es2015’],
plugins: [‘transform-runtime’]
}
}
]
}

プリセットとプラグインの情報を内部に保持することによりwebpack.config.jsファイル、私たちは持っていることを避けることができます.babelrcファイル。