この記事は前回の記事の続きになります。
前回では、そもそものビルドの意味やそれぞれのプラグイン等がどんな役目を果たすのかという基礎的な部分がわかっていなかったので、その辺を理解していきました。
今回は実際にビルドを実行するところまで進めていければと思います。
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を見ると、ちゃんとwebpackとwebpack-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が出ているけど特に問題なさそうなので無視しちゃいました。笑
解消方法は参考記事の中に書いてあったので気になる人はそちらを。
