node.js のBabel の基本的な使い方(Babel7)

node.js のBabel の基本的な使い方(Babel7)

Babelはトランスパイラしてくれるモジュールです。例えばES6からES5にトランスパイラ(変換)してくれたりします。

コンパイルとは少し意味が違います。

ES6で記述したコーディングを、ES5にトランスパイラしたい場合は、オンラインで確認することが出来ます。このサイトです。非常に便利です。

Babelをインストールする

以下コマンドを実行します。

npm install --save-dev babel-cli

これでpackage.jsonが変更されています。

1ファイルごとにトランスパイラすることができます。

sample.js

let arr = [1,2]
let r = arr.map((x) => {
  return x * x;
});

このsample.jsをトランスパイルします。

C:\Users\xxxxx\myapps\vscode>.\node_modules\.bin\babel sample.js
let arr = [1, 2];
let r = arr.map(x => {
    return x * x;
});

ほとんど変わりがないですね、、。どうもbabel-cliだけではほぼトランスパイルしてくれないようです。

babel-preset-envをインストールする

以下コマンドを実行します。

npm install --save-dev babel-preset-env

インストール完了したら、.babelrcファイルをpackage.jsonと同じディレクトリに配置します。

.babelrc

{
  "presets": ["env"]
}

これで、再度以下コマンドを実行してみます。

C:\Users\takahashi\myapps\vscode>.\node_modules\.bin\babel sample.js
"use strict";

var arr = [1, 2];
var r = arr.map(function (x) {
  return x * x;
});

無事、トランスパイルすることが出来ました。

参考サイト

Babel7のインストール

Babel7から以下のようにしてインストールするように変更されました。

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

package.jsonと同じ階層にbabel.config.jsを配置します。babel7からは.babelrcよりこちらが推奨されている？ようです。

const presets = [
  ["@babel/preset-env"]
];

module.exports = { presets }

module.exportsとは

関数や変数を公開する際にmodule.exportsと書いて公開することができます。

これはnode.js独自の記述方法で、もともとはCommonJSの仕様ではexportsしかありません。

module.exportsを使用することによって関数をエクスポート（公開）することが可能になります。

Log.js

module.exports = (msg) => {
  console.log(`メッセージ : ${msg}`)
}

Log.jsを使用してみます。

const Log = require ('./Log')

Log('aaa') // メッセージ : aaa

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^