webpackをインストールしモダンなフロントエンド開発環境を整える
- 公開：
- 更新：
- カテゴリ： webpack
- タグ： Linux,JavaScript,Webpack,node.js,NPM,Vagrant,CSS
Webアプリケーションのフロントエンドには、JSやCSSなどのたくさんの技術が集約されています。一口にJavaScriptと言っても、お馴染みのjQueryからReact.jsやAngular.js、Vue.jsなどのフレームワーク、はたまたES6（ES2015）と呼ばれるECMAScript、いわゆるJavaScript標準などなど、１つのアプリケーションで用いられる技術は多岐にわたります。また、見た目を司るCSS（Cascading Style Sheets/カスケーディング・スタイル・シート）も、現代ではそのまま記述するのではなく、SASS（SCSS）やLESSといったスタイルシート言語を用いて動的に記述していく方法も当たり前になりました。
そしてそれらを惜しみなく活用した場合、記述したソースコードでは動作せず、コンパイルが必要になる事がほとんどです。また、ファイルを分割してソースを記述していく事も多い為、読み込ませる際の効率やリクエスト数も考えると、最終的にビルドしてファイルをまとめる必要（依存性も加味した上で）も出てきます。
今回は、モジュールバンドラであるWebpackを導入し、レガシーからモダンまでをカバーできるフロントエンド開発環境を整えていきます。
- アジェンダ
検証環境
今回の検証環境ですが、Windows10でVMにLinux CentOS 7を入れて行っています。npm周りで迷子になるケースがありがちなので、途中WinのVagrantについても掘り下げますが、基本的にはLinux環境で動作するように進めています。
今回は、執筆時点で現行のWebpack4を導入し、JSとCSSの開発を開始する手前の設定までを行います。
尚、JSのフレームワークの導入までは今回は行いません。その手前までを構築して、あくまでも汎用的に。そこからは何を選択して導入しても良いようなラインまでの構築を行います。
Webpackについて
Webpackとは、Node.jsを用いてサーバーサイドで動作させるモジュールバンドラツールです。
https://webpack.js.org/
主要な特徴は以下の通り
- 基本的なコンパイル、ビルドを行う
- 複数ファイルを１つにバンドルする
- JSもCSSも一緒のファイルにバンドルする（もちろん別々も可）
- トランスコンパイラを用いてES6などの新しい仕様の記法やフレームワーク特有のソース（ReactのJSX等）を、動作させるコードへコンパイルする
- コードテストやユニットテストを行う
厳密には、必要なモジュールを導入しそれらをWebpackで動作させる事でこういった処理が一気通貫で可能になります。
Node.jsのインストール
Webpackの導入にはNode.jsが必要なので、まずはNode.jsをインストールし、webpackの導入に必要なものを一式揃えます。
今回は現時点で最新版であるv11.5.0をインストールします。Node.jsのバージョン情報はその都度公式で確認してください。
https://nodejs.org/ja/
Node.jsの導入確認
まずは以下のコマンドを叩いてNode.jsのバージョンを確認すると共に、そもそもインストールされているかを確認します。
# node.js 導入確認
node -v
# 実行結果
[demo@localhost ~]$ node -v
-bash: node: command not found
「command not found」と表示されたらNode.jsが入っていないのでインストールを行う必要があります。
もし古いバージョンのNode.jsが入っていて新しいものに入れ直したい場合はアンインストールします。
# Node.js アンイストール
yum remove nodejs
インストール
まずはv11のリポジトリを追加します。以下のコマンドを叩きます。
# v11 リポジトリ追加
curl -sL https://rpm.nodesource.com/setup_11.x | bash -
# 実行結果
[demo@localhost ~]$ curl -sL https://rpm.nodesource.com/setup_11.x | bash -
## Installing the NodeSource Node.js 11.x repo...
## Inspecting system...
+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m
## Confirming "el7-x86_64" is supported...
+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_11.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Downloading release setup RPM...
+ mktemp
+ curl -sL -o '/tmp/tmp.Yd43V4SiQG' 'https://rpm.nodesource.com/pub_11.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Installing release setup RPM...
+ rpm -i --nosignature --force '/tmp/tmp.Yd43V4SiQG'
## Cleaning up...
+ rm -f '/tmp/tmp.Yd43V4SiQG'
## Checking for existing installations...
+ rpm -qa 'node|npm' | grep -v nodesource
## Run `sudo yum install -y nodejs` to install Node.js 11.x and npm.
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
リポジトリが切り替わり、任意のバージョンのNode.jsがyumでインストールされる事を確認します。
# yumでインストールされるnodejsのバージョンを確認する
yum list install nodejs
# 実行結果
Available Packages
nodejs.x86_64 2:11.5.0-1nodesource nodesource
変わらない場合は、一度キャッシュを削除してみると良いです。
# キャッシュファイルの確認
du -sh /var/cache/yum
# 実行結果
[demo@localhost ~]$ du -sh /var/cache/yum
481M /var/cache/yum
# キャッシュを削除
yum clean all
キャッシュを削除したら、再度確認してみてください。
それではNode.jsをインストールします。GCCコンパイラとmakeユーティリティも必要なので一緒にインストールします。
# Node.js と development tools インストール
yum install -y nodejs gcc-c++ make
インストールが完了したら、バージョンを確認します。また、一緒にnpmもインストールされるので、こちらも導入を確認しておきます。
# Node.js バージョン確認
node -v
# npm バージョン確認
npm -v
# 実行結果
[demo@localhost ~]$ node -v
v11.5.0
[demo@localhost ~]$ npm -v
6.4.1
インストールされた事が確認できました。
package.jsonの作成
Webpack導入の為に、package.jsonを作成します。
プロジェクトルートへ移動し、以下のnpmコマンドを叩きます。
# package.jsonファイルの生成
npm init -y
プロジェクトルート直下にpackage.jsonが生成されます。
--------------------------------
.
└─ package.json
--------------------------------
webpackのインストール
それではwebpackをインストールします。webpack4から、webpack-cliも一緒にインストールする必要があるので、これも一緒にインストールします。
# webpack webpack-cli インストール
npm i -D webpack webpack-cli
# 実行結果
[demo@localhost sample]$ npm i -D webpack webpack-cli
+ webpack-cli@3.1.2
+ webpack@4.28.1
added 379 packages from 288 contributors and audited 4263 packages in 60.65s
found 0 vulnerabilities
Windows＋VirtualBox（Vagrant）でnpmのインストールが失敗する場合の解決法
もしVirtualBox（Vagrant）をwindowsで使用している場合は上記コマンドではインストールが失敗（ロールバックの嵐が発生）する場合があります。
共有フォルダをマウントしていない場合
この場合は以下２つの方法どちらかで解決します。
- コマンドプロンプト（以下cmd）もしくはPowerShellを管理者権限で起動させ仮想環境を立ち上げる
- webpackインストールする時に、--no-bin-links オプション（＝シンボリックリンクを回避する）を付けて実行します。
後者で行う場合は、以下のようなコマンドになります。
npm i -D --no-bin-links webpack webpack-cliまた、その際に以下のWARNNINGが出る場合があります。
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
fseventsがスキップされた旨を示していますが、fseventsはMac用のものなのでWindowsの場合はスルーしてしまって問題ありません。
共有フォルダをマウントしている場合
ホストOSとゲストOS間で共有フォルダをマウントしている場合で、共有フォルダ内にnode_modulesディレクトリがありそこへwebpackのインストール（に限らず、全てのnpmでのインストール）を行う場合は前者の方法でも失敗します。
これは、デフォルトではVirtualBox内で共有フォルダにシンボリックリンクを貼る事が許可されていない事に加えて、そもそもWindowsとの仕様の違いがいくつかありNGとなっています。
と言っても回避は可能です。その方法をVagrantを例に解説します。
まずは、仮想環境上のプロジェクトを一旦停止します。
vagrant haltSymlinkを有効にする為にVagrantfileに以下を追記します。
config.vm.provider :virtualbox do |vb|
vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARED_FOLDER_NAME","1"]
end
Symlinkとは、Windowsでシンボリック・リンクを貼るためのものです。
設定配列の第三引数に共有フォルダ名を指定しますが、例えばsrcフォルダを共有フォルダとしていた場合、設定は以下のようになります。
# 共有フォルダの指定が「srcフォルダ」の場合
config.vm.synced_folder "./src", "/path/to/src"
# 上記の場合の設定
config.vm.provider :virtualbox do |vb|
vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/src","1"]
end
ここまで進めたら、cmdもしくはPowerShellを管理者権限で起動します。
Windowsでは管理者権限でないとSymlinkが使えません。つまりシンボリックリンクを貼る事ができないので、cmdやPowerShellを管理者権限で起動させる必要があります。
Windowsの場合、セキュリティ上の理由からデフォルトではリモートサーバ上に向けてシンボリック・リンクを貼る事はできない（無効になっている）ので、以下のコマンドをcmd上で叩いてリモートサーバ上のシンボリックリンクを有効にします。
# リモートサーバ上のシンボリックリンクを有効にする
fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1
次に、以下のコマンドを叩いて状態の確認を行います。実行結果が以下のようになればリモートサーバ上のシンボリックリンクが有効になっています。
# 状態の確認
fsutil behavior query symlinkevaluation
# 実行結果
> fsutil behavior query symlinkevaluation
ローカルからローカルへのシンボリック リンクは有効です。
ローカルからリモートへのシンボリック リンクは有効です。
リモートからローカルへのシンボリック リンクは有効です。
リモートからリモートへのシンボリック リンクは有効です。
cmd上での操作は以上です。それでは改めて仮想環境上のプロジェクトを立ち上げます。
vagrant up立ち上げたら仮想環境へログインし、シンボリックリンクを貼っていきますが、ここで大事なのは、node_modulesを共有フォルダの外に設定する。ということです。
例えばマウントした共有ディレクトリが /var/www/html/src だった場合は、共有扱いではない個所（srcディレクトリの外）にnode_modulesディレクトリを１つ作成します。
# ディレクトリを作成
mkdir /var/www/html/nodes/src/node_modules
プロジェクトディレクトリへ移動し、シンボリックリンクを貼ります。
# プロジェクトディレクトリへ移動
cd /var/www/html/src
# シンボリックリンクを貼る
ln -s /var/www/html/nodes/src/node_modules node_modules
# 実行結果
[demo@localhost src]$ ll
node_modules -> /var/www/html/nodes/src/node_modules
これで完了です。npm init -y してpackage.jsonを作成したら、webpackをインストール出来ます。
Webpackコマンドを使えるようにする
Webpackのインストールが完了したら、バージョン確認のコマンドを叩いて導入出来たかを確認します。
# webpack コマンドでバージョンを確認
node_modules/.bin/webpack -v
# 実行結果
[demo@localhost src]$ node_modules/.bin/webpack -v
4.28.1
ここで、上記のようなコマンドではwebpackコマンドを叩いている気がしないので、パスを通します。プロジェクトルートで以下のコマンドを叩きます。
# webpack コマンドのパスを通す
export PATH=$PATH:./node_modules/.bin
パスが通っているか確認します。
# パスが通ったか確認
find . -type l
# 実行結果
[demo@localhost src]$ find . -type l
./node_modules/.bin/acorn
./node_modules/.bin/atob
./node_modules/.bin/json5
./node_modules/.bin/miller-rabin
./node_modules/.bin/mkdirp
./node_modules/.bin/errno
./node_modules/.bin/semver
./node_modules/.bin/sha.js
./node_modules/.bin/terser
./node_modules/.bin/which
./node_modules/.bin/rimraf
./node_modules/.bin/import-local-fixture
./node_modules/.bin/webpack
./node_modules/.bin/webpack-cli
上記のように、パスが通っている事が確認できたら、改めてバージョンを確認します。
[demo@localhost src]$ webpack -v
4.28.1Webpackの導入は大体終わりましたが、空っぽの状態で開始したプロジェクトルートは、この時点で以下のようになっています。
--------------------------------
.
├─ node_modules/
├─ package.json
└─ package-lock.json
--------------------------------
まとめ
作業は以上で完了です。Webpackのインストールまでを行ったので、次回はここに必要なモジュールを追加し、設定を行って実際にWebpackを用いたコンパイル＆ビルドを行っていきます。
![Laravel入門[MVC]モデルを使ってデータベースからデータ取得・表示を行う](https://s3.ap-northeast-1.amazonaws.com/ritolab.com/images/article/59575876b4551/49/f26c6ccf0526544705c6caedf97b8710.png)
PHP5技術者認定上級試験 認定者