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

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

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

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

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

Babelをインストールする

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

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

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

sample.js

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

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

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

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

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

.babelrc

{
"presets": ["env"]
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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;
});

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

参考サイト

Babel7のインストール

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

const presets = [
["@babel/preset-env"]
];
module.exports = { presets }

view raw
gistfile1.txt
hosted with ❤ by GitHub

module.exportsとは

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

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

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

Log.js

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

const Log = require ('./Log')
Log('aaa') // メッセージ : aaa

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA