jsを統合、トランスパイルする

実際に自動化された開発環境を制作していきましょう。

自動化処理の流れ↓

1. distの中身を消す
2. 画像、css、html,jsをdistにコピー
3. scssをコンパイルする
4. プロパティをルール通りに並べる
5. プレフィックスを付ける
6. pugをコンパイルする
7. jsを統合、トランスパイルする←今ここ
8. （監視）画像の追加、名前の変更を検知してdistにコピー
9. （監視）scssの変化を検視し、自動コンパイルコンパイル
10. （監視）cssの変化を検知してプロパティをルール通りに並べる
11. （監視）cssの変化を検知してプレフィックスを付ける
12. （監視）jsの変化を検知してファイルを統合、トランスパイルする
13. （監視）pugの変化を検知し、コンパイルする
14. （監視）ファイルの変更を検知してブラウザを更新する

Java Scriptを統合、トランスパイル[user_help]バージョンを変更すること。詳しくはこちら[/user_help]します。

java ScriptはES6という記載方法があり、scssのようにファイルを機能ごとに分割し、jsを完結にわかりやすく書くことができます。

ですが、まだES6の書き方に対応できないブラウザが存在するので従来の書き方、ES5にバージョンを落とす（トランスパイルする）必要があります。それに伴い分割したファイルを1つにまとめる必要もでてきます。

分割したファイルをまとめるのにwebpackというものを使用しますが、Reactやvueなどにも使用するのでこの方法を知っていると、後の勉強の助けになりますよ。

webpackで統合、トランスパイルする

jsを統合、トランスパイルするには複数のパッケージが必要となります。

• webpack
• webpack-cli
• babel-loader
• @babel/core
• @babel/polyfill
• @babel/preset-env

この5つのパッケージが必要になります。

そして、webpack.config.jsと、babel.config.jsという設定ファイルが必要です。

すこしやることが多いですが頑張りましょう。

webpack、webpack-cli、babel-loader、@babel/core、@babel/polyfill、@babel/preset-env、必要なパッケージをすべてまとめてインストールします。

yarn add webpack webpack-cli babel-loader@babel/core@babel/polyfill@babel/preset-env

package.jsonがあるディレクトリと同じ場所（htdocs/）にwebpack.config.jsと、babel.config.jsという名前でファイルを作ってください。

htdocs ├─dist ├─node_modules ├─public ├─src ├─babel.config.js←作る ├─package.json ├─postcss.config.js ├─webpack.config.js←作る ├─yarn.lock └─yarn-error.log

そこにES6を統合・トランスパイルする設定を書いていきます。

その前に、いつもの流にそってpackage.jsonのscroptを記載しておきましょう。以下のコードを記載します。

"scripts":{"webpack":"webpack --mode development"}

オプションはこちらを参考

webpack.config.jsの設定をしよう

webpack.config.jsには『どのファイルをどうするのか』ファイルの統合についての設定を記載していきます。

const PATH=require('path');const JS_PATH=PATH.join(__dirname,'./src/js');const JS_DIST_PATH=PATH.join(__dirname,'./');module.exports=[{mode:'development',entry:{'dist/common/js/bundle':JS_PATH+'/Main.js'},output:{path:JS_DIST_PATH,filename:'[name].js'},resolve:{extensions:['.js'],modules:[JS_PATH,'node_modules']},module:{rules:[{test:/\.js$/,use:[{loader:'babel-loader',options:{presets:[['@babel/env',{modules:false}]]}}],exclude:/node_modules/}]}}];

自分の環境に合わせて設定を変更なければいけない個所についてはコメントで簡単な解説を入れてあります。

基本的に講座と同じディレクトリ構造で制作していれば変更などする事なく、コピペで実行可能です。

babel.config.jsの設定を記載しよう

babel.config.jsにはトランスパイル時の対象ブラウザについての設定を書いていきます。

module.exports=function(api){api.cache(true);const presets=[['@babel/preset-env',{targets:{ie:11,esmodules:true},useBuiltIns:'usage',corejs:3}]];return {presets};};

このファイルは特に変更する必要はありません。

実行して動作を確認する

実際に実行し、正しく動作しているか確認を行いましょう。

確認のためのjsファイルを制作しましょう。

今回はトランスパイルと統合の確認をしたいのでES6の記載方法でファイルを分割したものを制作します。

主となるファイルをsrc/js/Main.jsとし、src/js/uisample.jsを読み込んでみましょう。

ディレクトリ構造

htdocs ├─dist │ └─common...共通するデータを格納 │ └─js...Main.jsはこちらにbundle.jsとして出力される └─src └─js...jsデータを格納 ├─ui...処理毎のパーツを格納 │ └─sample.js...Main.jsで読み込むファイル └─Main.js...メインとなるファイル

Main.js

import Sample from './ui/sample';const sample=new Sample();const start=()=>{sample.init();};window.addEventListener('load',()=>{start();});

sample.js

export default class Sample {init(){console.log('おはよう世界！');}}

以下のコマンドを入力して処理を実行します。

yarn webpack

無事dist/jsにbundle.jsが出力されました。

ほとんど読めません（笑）

bundle.jsを実行してみる

次にwebpackによって制作されたbundle.jsがきちんと動作するかブラウザで実行し確認してみましょう。

そのためにはindex.htmlファイルからbundle.jsを読み込んでブラウで実行する必要ができてきます。

index.pugに以下を記載してコンパイルし、制作されたindex.htmlファイルをブラウザで実行し、確認しましょう。

index.pug

doctype html html(lang="ja")head meta(charset="UTF-8")meta(http-equiv="X-UA-Compatible"content="IE=edge")meta(name="description"content='ページの説明')meta(name="viewport"content="width=device-width, initial-scale=1")title='タイトル'link(rel="stylesheet"href="./common/css/app.css")script(src="./common/js/bundle.js"defer)body.hoge おはよう世界！

コンパイルすると以下のhtmlが出力されます。

制作されたindex.htmlをブラウザで実行しましょう。

コンソールに「おはよう世界！」と出力されたので正しく動作していますね！

まとめ

必要なパッケージwebpack、webpack-cli、babel-loader、@babel/core@babel/polyfill、@babel/preset-envをインストールする。

yarn add webpack webpack-cli babel-loader@babel/core@babel/polyfill@babel/preset-env

package.jsonのscriptを記載（処理全体）

"scripts":{"build":"npm-run-all -s clean copy:mock copy:js css autoprefixer pug webpack","watch":"npm-run-all -p","clean":"del-cli dist/*","copy:mock":"cpx \"./src/mock/**/*.{html,png,jpg,svg,gif}\" ./dist -v","copy:js":"cpx \"./src/js/{first,vendor}.js\" ./dist/common/js","css":"node-sass --include-path scss src/scss/app.scss src/scss/_app.css --output-style nested --indent-type space","autoprefixer":"postcss -o dist/common/css/app.css src/scss/_app.css","pug":"pug -b ./src/mock/ -P -o ./dist/ ./src/mock/","webpack":"webpack --mode development",}

webpackについての参考記事

webpackとBabelの基本を理解する

最新版で学ぶwebpack 5入門JavaScriptのモジュールバンドラ

オプションはこちらを参考

webpackを使用するとType ScriptやReactも使用できるようになります。

Type Scriptについてはこちらを参照

Reactについてはこちらを参考