【Babel+Webpack】JavaScript(ES6)の実行環境構築

はじめに

VSCode(というよりNode.js)でES6が使えないことを知らず、地味にハマったのでメモです。

※6/16追記

モジュールの勉強を兼ねてWebpackも使ってみました。

✅参考
💻【Node.js】babel を使って ECMAScript 2015 (ES6) へ対応する
主にこの記事を参照。ただ、package.jsonの記載が省略されていたりしたので別記事も参照。

💻package.jsonの中身を理解する
ついでにpackage.jsonについて少し深堀。
scriptsで任意のshell scriptを実行するエイリアスコマンドを定義できる。

💻[Node.js]ES6仕様で動くようにする
今回は試してないが、ビルドとかの方法も載っている

VSCodeでJavaScriptのES6を使う

検証したかったファイルは以下です。

export.js

const text = "hello world!!";
export default text;

import.js

import text from"./export";
console.log(text);

✅環境構築

①モジュールのインストール

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

別途参考:Babelの基本的な使い方

babel-cliが本体

babel-preset-envがトランスパイラー

②babel-preset-envの設定

Babelの設定は基本的に.babelrcファイルに記述

.babelrcを作成

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

※.babelrsと見間違えて地味にハマりました。。。笑

※追記:以下でも実行できました。

{
  "presets": ["env"]
}

presetsはBabelが変換処理を行う際に利用するプラグインのコレクション。

上記はtargetsでnodeコマンドで実行できるファイルに生成して!と明示的に記載しているってことだと思います。たぶん。

③package.jsonを生成

npm init

編集

"scripts": {
  "start": "babel-node import.js",// 実行したいファイルを記載
},

④実行

npm start
>> jsbasic@1.0.0 start C:\xampp\htdocs\JSbasic
   babel-node import.js

   hello world!!

Babelの深堀

※6/16追記

参考:Babelの基本的な使い方

✅上記をもっと使いやすくする設定

以下でも実行可能

./node_modules/.bin/babel-node export.js

もっと便利にpackage.jsonを編集

"scripts": {
  "start": "babel-node"
},

で実行

> npm start export.js
hello world!!

✅babelを使ってみる

package.jsonに追記

"scripts": {
  "start": "babel-node",
  "babel": "babel"
},

実行

> npm run babel import.js

> es6@1.0.0 babel C:\xampp\htdocs\es6
> babel "import.js"

'use strict';

var _export = require("./export");

var _export2 = _interopRequireDefault(_export);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_export2.default);

🙄トランスパイルされているのがわかりますね!!

✅コンパイルして出力してみる

参考:webpackとBabelの基本を理解する(2) ―Babel編―

-oオプションをつけることで任意の場所にトランスパイル後のファイルを生成可能。

実行

npx babel import.js --out-file compiled-import.js

確認

varで定義されているのがわかります。

モジュールの理解

✅モジュール

参考:[意訳]初学者のためのJavaScriptモジュール講座 Part1

良いプログラマーはプログラムをモジュール単位に分割する。

引用
JavaScriptにおいては、トップレベル関数のスコープ外で定義された変数はグローバル変数となります。(つまり、誰もがその変数にアクセスできてしまいます)このため、まったく関係のないコードがグローバル変数にアクセスできてしまい、これを名前空間汚染”と呼びます。

🙄少し機能多めのアプリを作った際の再利用性皆無だったのでとても刺さります。。。笑

引用
モジュールパターンは、クラスを擬似的に再現するために使われます。(なぜならネイティブのJavaScriptではクラスをサポートしていないからです)

✅モジュールバンドル

参考:[意訳]初学者のためのJavaScriptモジュール講座 Part2

モジュールバンドルとは、正しい順番で、複数のモジュール(及び依存性)を1つ(あるいは複数)のファイルへとくっつけること。

✅実際に使ってみる

参考:Todoアプリ(JSPrimer)

JavaScriptモジュールはHTMLから<script type=”module”>で読み込む。
script要素ごとにモジュールスコープが異なるため、モジュール同士の連携はできない。

 

Webpackを使ってみる

参考:レガシーなJavaScript構成をWebpackでモジュール化するリファクタリング方法

Webpackはモジュールバンドルを実現するツール。

①インストール

npm install --save-dev webpack webpack-cli

②webpack.config.jsを作成

※バンドルする際の設定ファイル

module.exports = {
  mode: 'development',
  entry: './es6/import.js',
  output: {
    filename: 'main.js',
    path: `${__dirname}/dist/js`
  }
};

参考:WebpackのCan’t resolveがどうしても解消できない

カレントディレクトリの表記を消すとエラーになる。

引用:WebpackのCan’t resolveがどうしても解消できない
node.jsでは、標準ライブラリとnpmからインストールしたnode_modules内のモジュールは ‘./’ をつけずに指定し、それ以外のjsファイルは’./’か’/’か’../’から始めて指定する、というルールになっている

package.jsonの編集

"scripts": {
  "start": "babel-node",
  "babel": "babel",
  "webpack":"webpack"
},

実行

npm run webpack

main.jsを確認。よく見るような感じ。

🙄console.logしてるだけなのに長すぎ。。。笑

とりあえずhtmlファイル用いてブラウザで動作するか確認します。

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Module Test</title>
  </head>
  <body>
    <p>test</p>
    <script src="./main.js" type="module"></script>
  </body>
</html>

ブラウザで確認するとCORSエラー。。。

実行(JSPrimerさんのブラウザを活用させていただく。)

npx @js-primer/local-server

確認できた◎

おわりに

nodeコマンドでimport文使うとエラーになっていた問題が解決しました。

まだまだ知らないことが多い。。。

※6/16追記

Babel+Webpackを使ってみて現場ではこういった環境構築が当たり前にされているんだろうなと感じた。

ここら辺少しでも独学でできるだけ慣れていきたい。

Gulp+Babel+Webpack+TypeScriptって感じなんだろうな~これマスターしたい!!

コメントを残す