N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章7,8節です。
モジュールバンドラー
複数ファイルのJavaScriptを1つにまとめられる
Node.jsのコアモジュールをブラウザでも利用できる
webpack
モジュールバンドラーとしてwebpack を使用。
babel-loaderも同時にインストール。
yarn add webpack@4.26.1 webpack-cli@3.1.2 @babel/core@7.1.6 @babel/preset-env@7.1.6 babel-loader@8.0.4 --dev
babel-loader
- 最新のJavaScriptで書かれたコードをブラウザが実行できるバージョンにコンパイルするモジュール
webpackの設定ファイル
webpack.config.js
module.exports = {
context: __dirname + '/app',
entry: './entry',
output: {
path: __dirname + '/public/javascripts',
filename: 'bundle.js'
},
mode: 'none',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
__dirname
- 現在の場所を示す既に用意された変数(定数？)
mode
- bundle.jsの圧縮の方法
test
- 正規表現を使うときの決まり文句
exclude
- 外部ファイル。今回はnode_modulesから引っ張ってくる
entry.js
'use strict';
import dc from 'damage-calc';
import crypto from 'crypto';
const root = document.getElementById('root');
root.innerHTML =
`<p>
攻撃力 100, 防御 50, 防御貫通 30 のダメージは
${dc.effectiveDamage(100, 50, 30)}
</p>
<p>
${crypto.randomBytes(8).toString('hex')}
</p>
`;
importで書かれたモジュールがbundle.jsに書き込まれる。
npx webpack
webpack.configの内容をもとに、bundle.jsに出力。
expressで作られたlayout.pugを変更
layout.pug
script(defer, src='/javascripts/bundle.js')
defer属性
- スクリプトを文書の解析完了後に JavaScript を実行することをブラウザに示す属性。ページ表示速度が向上する。
jQuery
HTML の文章の横断や操作、イベントハンドリング、アニメーションなどを 行うための簡単な API を提供するライブラリ
インストール。
yarn add jquery@3.4.1
entry.js
import $ from 'jquery';
const block = $('#block');
const scalingButton = $('#scaling-button');
scalingButton.click(() => {
block.animate({ width: '200pt', height: '200pt' }, 2000);
block.animate({ width: '100pt', height: '100pt' }, 2000);
});
clickは古いらしい。
entry.js
scalingButton.on('click', () => {
block.animate({ width: '200pt', height: '200pt' }, 2000);
block.animate({ width: '100pt', height: '100pt' }, 2000);
});
まとめ
この辺り、ちょっとサーバーとクライアントの境が自分の中で曖昧になってきてる。整理しないと。
↧