簡単なJavaScriptのプログラムを作る時の雛形プロジェクトを作ったのですが、Sassの組み込みで苦戦したので、備忘録として設定ファイルなどについて残しておきます。
- 2017/11/3
index.html
のテンプレートをsrc
フォルダーに入れて、html-webpack-plugin
でdist
にビルドする手順を追加
目次
前提
- macOS10.12.6
- Composerとnodeはインストール済みとする
- Google Chrome
プロジェクト用のフォルダーを作成して、cd
で移動しておきます。例えば、test-webpack
フォルダーに構築する場合は、ターミナルで以下を実行します。
mkdir test-webpack && cd test-webpack
Browsersync
Browsersync - Time-saving synchronised browser testing を参考に、インストール作業をします。
Browsersyncをインストール
ソースコードを変更したりした時に、ブラウザーを自動的に更新したいのでBrowsersync
をグローバルにインストールします。まずはターミナルを起動して、以下を実行してインストール済みか確認します。
browser-sync -v
エラーが表示されたら、以下を実行してグローバルにインストールします。要求されたら管理者パスワードを入力してください。
sudo npm i -g browser-sync
Browsersyncの設定ファイル
Browsersyncが動く様になったら、プロジェクトフォルダー内で以下を実行して設定ファイルを作成します。
browser-sync init
これでプロジェクトフォルダー内にbs-config.js
という設定ファイルが作成されます。Atomなどのテキストエディターで開いて、"files"の項目と、"server"の項目を以下のように設定してください。
"files": ["./src/**/*"],
"server": { "baseDir": "./dist" },
"files"は変更を監視するファイルやフォルダーのリストで、以上でプロジェクトフォルダー内のsrc
フォルダー内のいずれかのファイルが変更されたらブラウザーをリロードします。
"server"は表示するブラウザーの基準フォルダーで、プロジェクトフォルダー内のdist
フォルダーをドキュメントのベースディレクトリーに指定しています。
WebpackとSassのインストール
WebpackでSassが通るようにまとめてインストールします。情報源は以下のあたりです。
- https://webpack.js.org/guides/getting-started/
- https://github.com/webpack-contrib/sass-loader
- https://github.com/webpack-contrib/extract-text-webpack-plugin
必要なパッケージをインストール
以下で、必要なパッケージをまとめてインストールします。
npm init -y npm i --save-dev webpack node-sass css-loader sass-loader style-loader extract-text-webpack-plugin html-webpack-plugin npm i --save lodash
- 1行目:npmの設定ファイルである
package.json
の生成 - 2行目:WebpackとSass関連の各種パッケージを開発環境でインストール
- 3行目:Webpackのサンプルで使われていたし、ランタイムであれこれ便利なので
lodash
をついでに入れておく
プロジェクトフォルダー内を構築
簡単なJavaScriptプロジェクトの雛形を構築します。プロジェクトフォルダーを以下のようにしてください。
node_modules
フォルダーとbs-config.js
、package.json
は作成済みなので、それ以外を作ります。ひとまず、ファイルは空で良いです。
src/index.html
を開いて、以下の内容にしてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SimpleJavaScriptProject</title> </head> <body> </body> </html>
CSSやJavaScriptのエントリーポイントへのリンクは、ビルド時に自動的に差し込まれるので不要です。
src/sass/styles.scss
を開いて、以下の内容にします。
$font-stack: Helvetica, sans-serif; $primary-color: red; .hello { font: 100% $font-stack; color: $primary-color; }
src/js/app.js
を開いて、以下の内容にします。
import _ from 'lodash'; import '../sass/styles.scss'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); return element; } document.body.appendChild(component());
JavaScriptのファイルで、import
で必要なファイルを読み込むことが大切です。2行目でSassのscssファイルを読み込む指示をしておくことで、Webpackのビルド作業でそのファイルがビルド対象になります。
設定ファイルを設定
package.json
を開いて、"scripts"の設定に以下のように"start"の行を追加してください。"test"の行の最後に,
を追加するのを忘れないようにしてください。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack --watch --config webpack.config.js & browser-sync start --config bs-config.js" },
プロジェクトフォルダー内にwebpack.config.js
を新しく作成して、以下のような内容にします。
Webpackの実行
ターミナルでnpm start
で、ビルドの実行、監視の開始、Webブラウザーの起動が実行できます。以下のようにHello webpack
と赤い文字で出力されれば成功です。
試しに、src/app.js
の以下の行を変更してみてください。
element.innerHTML = _.join(['Hello', 'webpack change'], ' ');
変更して上書き保存をすると、自動的にWebブラウザーが更新されて画面が変わります。変更が確認できない場合、もう一度src/app.js
上で[Ctrl]+[S]で上書き保存すると更新が確認できると思います。
確認ができたら、次の作業のために[Ctrl]+[C]キーでWebpackの監視を停止してください。
Seleniumのインストール
CodeceptionでWebブラウザー上で動作確認をするAcceptanceテストを動かすために、最新のSelenium Standalone Serverをダウンロードしてプロジェクトフォルダーに入れておきます。
http://www.seleniumhq.org/download/ を開いて、最新版をダウンロードします。
以下のような警告が表示されたら、構わないので[保存]してください。
ダウンロードが完了したら、Finderなどを使って、selenium-server-standalone-3.6.0.jar
をプロジェクトフォルダーに移動させてください。3.6.0
の部分は、実際にダウンロードしたバージョンに読み替えてください。
SeleniumとCodeceptionの起動コマンドを作成
Selenium Standalone Serverの起動と、まだインストールはしていませんがCodeceptionによるテストを起動するコードをpackage.json
の"scripts"欄に追加します。以下のように修正してください。
"scripts": { "test": "composer exec codecept run -v", "start": "webpack --watch --config webpack.config.js & browser-sync start --config bs-config.js & java -jar ./selenium-server-standalone-3.6.0.jar" },
Codeception
最後に、テストのためにCodeceptionをインストールします。
以下を実行して、インストールとテスト用の環境を展開します。
composer require codeception/codeception --dev composer exec codecept bootstrap
testsフォルダーが作成されて、その中にテスト用のファイルが作成されました。Acceptanceテスト用の設定をします。
Acceptanceテスト用の設定
tests/acceptance.suite.yml
を開いて、以下のように編集します。
actor: AcceptanceTester modules: enabled: - WebDriver: url: http://localhost:3000/ browser: chrome - \Helper\Acceptance
以上、Google Chromeでのテスト設定です。2017/10/27現在、Firefox56.0 ではうまく動かないようでした。
テストファイルの作成
ターミナルで以下を実行して、動作確認用のテストファイルを作成します。
composer exec codecept generate:cest acceptance CheckInst
tests/acceptance/CheckInstCest.php
を開いて、以下のようにします。
<?php class CheckInstCest { // tests public function tryToTest(AcceptanceTester $I) { $I->amOnPage('/'); $I->see('Webpack and Test'); } }
ベースディレクトリーをWebページで表示して、画面にWebpack and Test
と表示されるかを試すテストです。
開発とテストの実行
開発を始める時には、プロジェクトフォルダーで以下を実行します。
npm start
Webpackのビルドとファイル変更の監視、Browsersyncによるライブリロード、そしてSelenium Standalone Serverが起動します。
ターミナルは待機状態になって操作できなくなるので、もう一つターミナルを起動して、プロジェクトフォルダーを開きます。テストは以下で実行できます。
npm test
最初は以下のように失敗します。これは、期待している文字列Webpack and Test
が画面に表示されていないからです。
src/app.js
を開いて、表示内容を以下のように修正します。
element.innerHTML = _.join(['Webpack', 'and', 'Test'], ' ');
上書き保存をしたら、npm test
を再実行してください。表示内容が期待のものになったので、以下のようにテストが成功します。
まとめ
以上で環境構築完了です。最初に表示されるWebページはdist/index.html
、JavaScriptのコードはsrc/app.js
、Sassのコードはsrc/sass/styles.scss
に書きます。また、Webブラウザー上でのテストはtests/acceptance/CheckInstCest.php
に書き加えたり、新しくCestファイルやCeptファイルを作成して書きます。
Seleniumについて補足
このブログを書いた時点では、Firefox56.0をSeleniumで呼び出せていません。調査不足かも知れませんが、Releases · mozilla/geckodriver · GitHub で新しいgeckodriverが出てきたら動くようになるかも知れません。その際は、最新のgeckodriverをダウンロードしてプロジェクトフォルダーに保存して、package.json
の"scripts"に以下の設定を追加します。
"selenium-ff": "java -Dwebdriver.gecko.driver=./geckodriver -jar ./selenium-server-standalone-3.6.0.jar"
npm run selenium-ff
でgeckodriverを指定したSelenium Standalone Serverが起動するので、これで動くようになるかも知れません。