【JS】【Node.js】【Babel】EC6,EC5の使い方や変換方法について

javascriptのec6,ec5コードの実行方法とbabelでのec6→ec5変換方法をメモ。

これはかなりハマりました。とりあえずいろんなサイトを参考にしたので下記に記載しておきます。
Babel CLI(babelコマンド)の使い方
[babel-cli] babelのコマンドライン実行( es6 to es5)
import/exportとmodule.exports/require
Babelの使い方入門編|ES6をコンパイル(JavaScript)
Node.js – babelでES6を導入する最短手順
ブラウザで覚えるES Modules入門 – JavaScriptでモジュールを使う時代
ES6のexportについて
importとrequireどちらを使おう…。

自分がまずハマったきっかけはjavascriptのimport,exportフレーズです。これがnodeで実行したときに何度もエラーが出ました。
まず前述のフレーズがECMAScript2015(EC6)という新規格である事、それに対してnodeがEC5という一世代前の規格にしか対応していないという事実があるために発生してました。
下記はEC5の為、そのままnodeに実行させれば動くコードです。

一方で下記がEC6のコードとなります。呼び元のmain.jsを一部書き換えて作成してます。

上記のEC6規格のコードを実行するとコード解析でエラーとなります。
ここで必要になるのがBabelというAPIです。

EC6のコードをEC5に変換してくれるAPIなのですが、必要なものがどれなのかわからなくてハマりました。
とりあえずフォルダは例として”C:\node”とします。そのフォルダの直下で下記のインストールコマンドを実行しました。

上記のどれが必要かは整理できてません。
このインストールのあとに”C:\node”直下に”.babelrc”というファイルを作成します。

※Windowsだとエクスプローラ上から作成しようとすると”ファイル名を入力してください”エラーが発生するのでテキストエディタなどで新規作成から保存すればつくれます。

上記の作業を行ったあとに下記のコマンドから、ec6→ec5への変換を行います。

先ほど作成したmain2.jsが上記のように変換できる事を示してくれました(まだ実ファイルは作成されません)。
下記のコマンドで変換ファイルを作成します。

実行したら下記のようになります。

投稿者:

admin

サイト管理人

コメントを残す

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