箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

JSをビルドする【Node.js / npm / yarn / webpack / babel】

f:id:y_hakoiri:20191102121704j:plain

この記事は前回の記事の続きになります。

前回では、そもそものビルドの意味やそれぞれのプラグイン等がどんな役目を果たすのかという基礎的な部分がわかっていなかったので、その辺を理解していきました。

今回は実際にビルドを実行するところまで進めていければと思います。

Node.jsをインストール

前回の記事でもまとめていますが、JSをビルドするにはNode.jsの実行環境が必要になります。

今回私の場合は既にローカルにインストールされていたのでこの肯定は飛ばします。

$ node -v
v14.9.0

ちなみに、Node.jsが入っているということは一緒にインストールされるnpm(JSのパッケージマネージャー)も入っているということ

$ npm -v
6.14.7

yarnをインストール

yarnもnpmと同じくJSのパッケージインストールなので、npmを使えば多分いけたと思うのですが

この時はその自覚がなく、参考にしている記事にならってなんとなくyarnを使いました。笑

ちなみにyarnも既にローカルにあったので、インストールしようとすると

$ brew install yarn
Updating Homebrew...
・
・
Warning: yarn 1.22.5 is already installed and up-to-date
To reinstall 1.22.5, run `brew reinstall yarn`

updateだけされたようです。

元々インストールしてある場合はupdateだけしておくのが◎

$ brew update yarn

ちなみにここまでの作業はアプリのホームディレクトリで行いました。

package.jsonを作成

これはnpmもyarnも共通なのですが、パッケージの管理をするためにpackage.jsonというファイルが必要になります。

npmやyarnコマンドを仕様してパッケージをインストールすると、そのパッケージがpackage.jsonに書き込まれ、そこで管理されるイメージ。

ビルドしたいファイルがあるディレクトリまで下がって

$ cd src/client-js/lp
$ yarn install
yarn install v1.22.5
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 0.10s.

初期化することで、package.jsonが生成されます

$ yarn init -y
yarn init v1.22.5
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.03s.

package.json

{
  "name": "lp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

webpackをインストール

次にwebpack(コンパイラ)をインストールします。

そもそもビルド(実行可能ファイルを生成)する前にソースコードで書かれたJSファイルを機械語に変換する必要があるため、webpackを使ってコンパイルしていきます。

yarnコマンドを使ってインストール

$ yarn add webpack webpack-cli --dev
yarn add v1.22.5
・
・

webpackだけでなく、webpackコマンドを使用するためにwebpack-cliも必要なようです。

インストールが完了すると、node-modules配下にめちゃくちゃたくさんのディレクトリやファイルが出来上がる。

node-modulesはgitignoreしておくのがお作法のようです。

package.json

{
  "name": "lp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

package.jsonを見ると、ちゃんとwebpackwebpack-cliが追加されている。

先ほどのインストール時に--devオプションをつけているので、開発時にのみ必要なモジュールであるdevDependencies内に追記されています。

webpack.config.jsを作成

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'public/js')
    }
};

babelをインストール

babelはクライアントのブラウザ環境に依存しない形でコンパイルしてくれる。

もう少し平たく言うと、新しい規格に沿った形でソースコードを書いても古いブラウザに対応できるようコンパイルしてくれる。

$ yarn add babel-loader @babel/core @babel/preset-env --dev

package.json

{
  "name": "lp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.jsを修正

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'public/js')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', { modules: false }]]
                        }
                    }
                ]
            }
        ]
    }
};

(ネストが見辛くてごめんなさい)

ビルド実行

やっと準備が整ったのでビルド

$ yarn run webpack
yarn run v1.22.5
$ /Users/hako/Project/hoge-app/src/client-js/lp/node_modules/.bin/webpack
Hash: 516c3f75dd397b2704e6
Version: webpack 4.44.1
Time: 1331ms
Built at: 2020/09/12 12:04:29
   Asset      Size  Chunks             Chunk Names
index.js  5.39 KiB       0  [emitted]  main
Entrypoint main = index.js
[1] ./src/index.js + 3 modules 6.16 KiB {0} [built]
    | ./src/index.js 707 bytes [built]
    | ./src/hoge.js 2.06 KiB [built]
    | ./src/fuga.js 1.34 KiB [built]
    | ./src/hogefuga.js 2.07 KiB [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
✨  Done in 3.13s.

成功!

WARNINGが出ているけど特に問題なさそうなので無視しちゃいました。笑

解消方法は参考記事の中に書いてあったので気になる人はそちらを。

参考

yarn, webpack, babel, ビルドできる環境を作る - Qiita

2018年度版、React、webpack、Babelのセットアップ手順をアップデートしてみた - Qiita