Posted at

【JavaScript】ビルドとは何か〜webpackを使ってビルドする

この辺が曖昧だったので、書き残しておきます。


  • ビルドとは何か

  • なぜビルドが必要か

  • ビルドでは何を行なっているのか

  • ビルドしたらどうなるのか


Node.jsの特徴


  • JavaScriptをサーバーサイドで動かすための実行環境。

  • モジュール機能(他ファイルの読み込み)

  • ノンブロッキングI/Oで処理を効率化


参考記事

ノンブロッキングI/O (non-blocking I/O)

ノンブロッキングI/Oと非同期I/Oの違いを理解する

Node.js を5分で大雑把に理解する

Node.jsについて調べてみた

JavaScriptが辿った変遷

npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう


ビルドツール

Node.jsスタイルのコードは、そのままの状態ではブラウザで動きません。ソースコードを元にして、実際に動くプログラム(実行可能ファイル)を作ってあげる必要があります。

その作成処理のことをビルドと言います。

ビルドを実行するためには、ビルドツールを使用します。


概要

以下、10年遅れたJavaScriptの知識をざっくり10分でアップデートしようより引用。


最近のWebアプリケーションは、開発時のコードと実際の製品に使われるコードが異なります。開発者はブラウザーにサポートされていない可能性がある最新バージョンのJavaScriptでコードを書いたり、node_modulesフォルダー内のサードパーティ製パッケージとその依存オブジェクトを多用したり、静的解析ツールや圧縮ツール(Minifier)などを使ったりして開発します。これらをすべて変換、効果的にデプロイして、大半のWebブラウザーが理解できる形にするのがビルドツールです。



何を行うのか

以下、キャッチアップJavaScriptビルドより引用。


  • モジュール管理(依存性解決)

  • テンプレート管理

  • UT/操作テスト

  • 構文チェック

  • 圧縮/難読化

  • CSSプリプロセッサー

  • ES2015コンパイル

  • altJSコンパイル

簡単に補足します。


  • CSSプリプロセッサーとは、独自の構文でCSSを生成するプログラムのこと。コンパイルにより、純粋なCSSより可読性や保守性が高くなります。

  • ES2015(ES6)はJavaScriptの新基準ですが、古いブラウザでは対応していない場合があります。そのため、コンパイルで互換性のあるES5に変換します。(トランスパイル)

  • altJSとは、コンパイルによりJavaScriptに変換されるプログラミング言語のこと(代替JavaScript)。従来のJavaScriptより可読性と保守性が高く、コーディングの負担を減らします。

テンプレート管理が何を意味しているのか、よくわからなかったです。

文字列の組み込みのことでしょうか・・・?


タスクランナーとは

ビルドツールで行われている処理(タスク)を自動化してくれるツールのこと。

grupやGruntが挙げられます。

ネットで調べた限り、ビルドツールとタスクランナーの区分は曖昧でした。

webpackの立ち位置が微妙なところです。


npmとは

Node.jsのパッケージ管理ツール。

Node.jsと同時にインストールされます。

各種ビルドツールは、npmを使ってインストールすることができます。

今回は、webpackを使ってみます。


参考記事

CSS プリプロセッサー

CSSプリプロセッサ(CSSメタ言語)のお勉強

最近のビルドツールって何なの?

タスクランナー(Gulp)の入門の入門

【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう

JavaScriptをやっているとnpm/yarn/gulp/grunt/webpackなど、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめた

プログラミングが便利に!2018年に取り入れたいオススメのタスクランナー5選

Webpackってどんなもの?


実演


初期化

テスト用ディレクトリを作成し、移動します。

$ mkdir js_test

$ cd js_test

初期化します。

いくつか質問がありますが、全てEnterで大丈夫です。

$ npm init

初期化後、ディレクトリ内にpackage.jsonが生成されます。


webpackのインストール

webpackをローカルインストールします。

$ npm install webpack --save-dev

ディレクトリ直下にpackage-lock.jsonnode_modulesディレクトリが生成されます。

webpackのバージョンを確認します。

$ npx webpack -v

4.39.1

このバージョンでは、webpack-cliというライブラリも必要になります。

webpackと同じく、ローカルインストールします。

$ npm install --save-dev webpack-cli

インストール後、package.jsonのdevDependenciesに追記されました。


package.json

{

"name": "js_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}


webpackの設定

ビルドするためには、元のソースコードの場所とビルド後に生成される実行ファイル(bundleファイル)についての情報が必要です。

元のソースコードで一番最初に読み込まれるファイルは、エントリ-ポイントと呼ばれます。

ディレクトリ直下に設定ファイルwebpack.config.jsを作成します。

$ touch webpack.config.js

次のように設定します。


webpack.config.js

const path = require('path');

module.exports = {
// エントリーポイントの設定
entry: './src/my-main.js',
// ビルド後、'./dist/my-bundle.js'というbundleファイルを生成する
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-bundle.js'
}
};



テストファイルの作成

テストファイルを作成します。

文字列を返すメソッドを記述し、それをモジュールとして別ファイルで読み込んで出力します。

$ touch my-index.html

$ mkdir src
$ mkdir dist


my-index.html

<html>

<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="dist/my-bundle.js" charset="utf-8"></script>
</body>
</html>

$ cd src

$ touch my-main.js
$ touch my-func.js


my-main.js

var func = require('./my-func');

var res = document.createTextNode(func());
document.body.appendChild(res);



my-func.js

module.exports = function () {

return 'my-test';
};


エイリアスコマンドの設定

webpackコマンドを簡単に実行するために、エイリアスコマンドを設定します。

package.jsonのscriptに以下を記述します。


package.json

"build": "webpack --mode development"


もしくは


package.json

"build": "webpack --mode production"


modeにより、生成されるbundleファイルの内容が異なります。(動作は同じです。)

modeを指定しない場合は、ビルド実行時に警告が発生します。

この設定によりnpm run build でビルドを実行する事が可能になりました。


ビルド実行

エイリアスコマンドを設定したので、早速実行してみます。

$ npm run build

実行後、bundleファイルであるdist/my-bundle.jsが生成されます。

ブラウザで出力した文字列を確認できれば、ビルド成功です。


ビルドせずに動作を確認したい

ビルドせずに動作を確認したい場合は、watchオプションを利用します。

package.jsonのscriptに以下を記述します。


package.json

"watch": "webpack --watch"


npm run watchを実行すると、コードの変更が検知されるようになります。そのため、(画面をリロードすれば)ビルドせずに動作を確認する事ができます。


デベロッパーツール上で元のファイルを確認したい

デベロッパーツールのSourcesタブでは、ビルド元のファイルを確認する事ができません。

それらを表示させたい場合は、webpack.config.jsに以下を記述します。


webpack.config.js

devtool: 'inline-source-map'


これで、デベロッパーツール上でmy-main.jsmy-main.jsの内容を確認する事ができます。


参考記事

package.jsonの中身を理解する

package-lock.jsonについて知りたくても聞けなかったこと

勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)

npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう

webpack.config.jsがわからない

npmとwebpack4でビルド - jQueryからの次のステップ

step by stepで始めるwebpack

新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)

React.jsでビルドされる前のコードをブラウザで確認する