Babel7 を試す

Babel7 を試す

BabelでES6,ES7からES5に自動トランスパイル（transpile）する環境を作る．

実際にはタスクランナーやwebpackと組み合わせて使うことが多いが， 今回はちょっとしたES6コードをトランスパイルして確認することを想定してBabelのみを動かす環境を作る．

環境

• Windows10
  • Atom 1.34.0
  • npm 6.4.1

前提

Node.jsはインストールされている前提で進める．

Babelを導入する

公式Babel · The compiler for next generation JavaScriptのUage Guideを参考に進める．

1. 適当にプロジェクトファイルを作る．

   mkdir myproject

2. 初期化する（package.jsonを作る）．

   cd myproject
   npm init -y

3. babel関連のパッケージをインストールする．（バージョンを指定しなければ最新になる．）

   npm install --save-dev @babel/core @babel/cli @babel/preset-env
   npm install --save @babel/polyfill

   Note：preset-es2015をインストールする時代もあったが， 2019-03月時点では`@babel/preset-env`をインストールするのが推奨されている． reactを使う場合，追加で`preset-react`をインストールする．

   npm install --save-dev @babel/preset-react

4. `babel.config.js`の名前で設定ファイルを作る．

   const presets = [
     [
       "@babel/env",
       {
         targets: {
           ie: "11",
           edge: "17",
           firefox: "60",
           chrome: "67",
           safari: "11.1",
         },
         useBuiltIns: "usage",
       },
     ],
   ];
   
   module.exports = { presets };
   

   `@babel/preset-env` の場合，以下のオプションが利用できる．
   • `targets`optionで，対応させるブラウザのバージョンを指定する．
   • `useBuiltIns: "usage"` で， Promiseなどを使用している場合，polyfill用に自動でファイルをrequireしてくれるようになる．
5. トランスパイルするには，@babel/cli をインストールしている場合，`babel`コマンドが使える．

   .\node_modules\.bin\babel file.es6 --out-file file.js
   
   or
   
   npx babel file.es6 --out-file file.js

   ディレクトリ指定して丸ごとする場合（ex. srcにあるBabelファイルを丸ごとトランスパイルしてlibに出力）：

   npx babel src --out-dir lib

Babel7(@babel/cli)での対応ファイル

基本的にファイル名を指定してトランスパイルすれば，どの拡張子でも問題なし． ただ，ディレクトリごとトランスパイルした場合は，以下の対応ファイルしかトランスパイルされない挙動になった．

• .js
• .es6
• .es
• .jsx

.babelファイルは何故か無視される．

.jsファイルは，トランスパイル後のファイルとごっちゃになりやすいので使わない． .es6ファイルの名前も，最近はes7の仕様も一部使えるようになってきて名前がわかりにくくなってきている． .jsxはreact用なのでreact以外で使わないなどと考えていくと，実質使えるファイルは.esファイルだろうか．

設定ファイルの違い(babel.config.js vs .babelrc)

設定ファイルについては公式のConfig Files · Babelに書いてある．

Babel6までの設定ファイルは.babelrcであったが，Babel7でbabel.config.jsが導入された．公式の説明を読む限り，

• babel.config.js:プロジェクト全体の設定
• .babelrc:ファイル個別の設定

のように使うようで，ルートにbabel.config.jsを置き， 各ソースを置いたディレクトリに.babelrcを配置する．

Root:

babel.config.js
package.json
src1/
  .babelrc
  index1.es
src2/
  .babelrc
  index2.es

このように設定ファイルが複数ある場合， .babelrcに適用したいファイル(only optionなど)や使いたいプラグインを書いておくと， babel.config.jsに上書きマージする．

設定ファイルの例

ブラウザのtarget指定をして， polyfillの必要なファイルを自動追加， さらにreact対応させるのをbabel.config.jsで書くと以下のようになる．

const presets = [
  [
    "@babel/env",
    {
      targets: {
        ie:"11",
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1"
      },
      useBuiltIns: "usage",
    },
  ],
  [
      "@babel/preset-react",
      {},
  ],
];

module.exports = { presets };

これと同じのを.babelrc(json)で書くと以下のようになる．

{
  "presets": [
    [
      "@babel/preset-env",
      {
        targets: {
          ie:"11",
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1"
        },
        "useBuiltIns": "usage",
      }
    ],
    [
      "@babel/preset-react",
      {

      }
    ]
  ]
}

トランスパイル後にminifyする

公式に書かれているpresetは，babel-preset-minify がある．

インストール:

npm install babel-preset-minify --save-dev

例えば，production環境でトランスパイル後にminifyするような設定ファイル(.babelrc)は，

.babelrc:

{
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

参考記事： qiita.com

Windowsの環境変数の変更は，cmdかPowerShellで少し変わる．

• cmd: SET BABEL_ENV=production
• PowerShell: $env:BABEL_ENV="production"

上記で環境変数をproductionにした後，トランスパイルすればminifyされる． 環境変数をdevelopmentなど変えればminifyはされない．

$env:BABEL_ENV="production"
npx babel src -d lib

なお，この辺りはwebpackと組み合わせたほうがwebpack --mode productionなどとできるので使いやすいかもしれない．

参考： qiita.com

参考リンク

• babeljs.io

• qiita.com

• qiita.com