webpackで本番用と開発用にビルド方法を切り替える
本記事では、webpackで本番用と開発用にビルド方法を
切替える方法を紹介していきます。
本記事の内容です。
本番用ビルド設定
webpack.config.jsに、mode行を追加します。内容は、下記の通りです。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // 下記の1行を追加する。値は'production'。 mode: 'production', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
上記の設定でビルドを行うと最適化された状態でjsファイルの出力が行われます。
また、mode行を省略した時も、上記と同じ設定でビルドされるようです。
開発用ビルド設定
webpack.config.jsに、mode行およびdevtool行を追加します。内容は、下記の通りです。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // 下記の1行を追加する。値は'development'。 mode: 'development', // 下記の1行を追加する。値はお好みで。 devtool: 'cheap-module-eval-source-map', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
上記の設定でビルドを行うと、ブラウザの開発者ツール上でデバッグ可能な形で
jsファイルが出力されます。
ブラウザ上でソースコードを確認、デバッグ実行を行う際は、
webpack://
という場所にファイルが出力されますので、注意してください。(Chromeで確認。)
IE11の場合は、jsファイルを列挙した際にそのまま表示されるようです。
開発用ビルド設定のdevtoolについて
上記で説明したdevtoolの値には、下記サイトで説明されている値を設定することができます。Devtool
特に好みが無ければ、上記と同じ
cheap-module-eval-source-map
で良いと思います。
webpackを使用してjsファイルをまとめる方法
本記事では、webpackを使用してjsファイルを
まとめる方法を紹介していきます。
本記事の内容です。
webpackって何?
簡単に説明しますと、複数のリソースファイル(jsファイル、cssファイル、画像ファイル等)をまとめた配布物を生成するビルドツールです。
これを使用すると、複数のファイルを配布する必要が無くなり、
また、ブラウザでファイルを読み込む時に複数のファイルを読み込む必要が
無くなるため、パフォーマンス向上を図れます。
また、公式サイトは下記になります。
webpack.js.org
webpackを使用する準備
コマンドプロンプトを開き、webpackを使用する対象のソースコードが存在するフォルダへ移動します。
その後、下記のコマンドを実行して、package.jsonを生成します。
npm init -y
webpackのインストール
package.jsonの生成が終わったら、次は、下記のコマンドを実行してwebpackを使用するためにwebpack本体のインストールを行います。
npm i -D webpack webpack-cli
webpackの設定ファイル作成
webpackのインストールが終わったら、package.jsonが存在するフォルダにwebpackの設定ファイル(webpack.config.js)を作成します。
下記の内容は、index.jsをメインにdistフォルダへ、
main.jsという名前で複数のjsファイルをまとめた結果を出力するようになっています。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
JavaScriptソースコードの準備
今回は、index.jsとindex2.jsという2つのファイルを用意し、1つにまとめてみます。それぞれのファイルの内容は、下記の通りです。
index.js
import * as hogeFile from './index2'; $(function() { hogeFile.hoge(); hogeFile.fuga(); });
index2.js
export function hoge() { alert('hoge'); } export function fuga() { alert('fuga'); }
ビルド
下記のコマンドを実行し、ビルドを行います。npx webpack
以上で、複数のjsファイルをまとめることができます。
jsファイルをまとめた結果
最後に、参考までに今回jsファイルをまとめた結果を下記に記載しておきます。!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),$(function(){alert("hoge"),alert("fuga")})}]);
JavaScriptの処理をブラウザ上で止めてデバッグする方法
本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。
本記事の内容です。
JavaScriptのソースコードに一文加える
JavaScriptのソースコード内に、debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)
$(function() { // 下記の debugger; という一文を加えると、 debugger; // 処理がここで止まる alert('debug!'); });
ブラウザの開発者ツールを開く
ブラウザを開き、F12を押し、開発者ツールを開きます。その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。
Tomcatのタイムゾーン設定(Eclipse)
動的に後から追加したDOM要素にイベントを設定する(jQuery)
本記事では、動的に後から追加したDOM要素に
イベントを設定する方法を紹介します。
本記事の内容です。
何がしたいのか?
動的に後から追加したDOM要素にも動的にイベントを設定したい。今回は、hoge-textの後ろに動的にfuga-textを追加し、
hoge-textとfuga-textに対し、同じイベントを設定してみます。
駄目なソースコード
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/index.js"></script> </head> <body> <div id="container"> <input type="text" id="hoge-text"> </div> </body> </html>
$(function() { // この時点で生成されているコントロールにはイベントが設定される $('input').on('input', function() { console.log(this.value); }); // ここで追加したコントロールにはイベントが設定されない $('#container').after('<input type="text" id="fuga-text">'); });
うまくいくソースコード
HTML駄目なソースコードの時と同じです。
$(function() { // ドキュメント上すべてのinput要素に対して // inputイベントを設定する // onの第1引数にイベント名を // 第2引数に設定対象のid等を記述する $(document).on('input', 'input', function() { console.log(this.value); }); // ここで追加したコントロールにもイベントが設定される $('#container').after('<input type="text" id="fuga-text">'); });
JavaScriptのlinqで使用できる関数一覧
JavaScriptのlinqで使用できる
関数の一覧を作成したので、載せておきます。
本記事の内容です。
使用できる関数一覧
関数名 | 引数 |
---|---|
aggregate | seed, func, resultSelector |
all | predicate |
alternate | alternateValueOrSequence |
any | predicate |
asEnumerable | |
average | selector |
buffer | count |
cast | |
catchError | handler |
choose | selector |
concat | |
contains | value, compareSelector |
count | predicate |
defaultIfEmpty | defaultValue |
distinct | compareSelector |
distinctUntilChanged | compareSelector |
doAction | action |
elementAt | index |
elementAtOrDefault | index, defaultValue |
except | second, compareSelector |
finallyAction | finallyAction |
first | predicate |
firstOrDefault | predicate, defaultValue |
flatten | |
force | |
forEach | action |
groupBy | keySelector, elementSelector, resultSelector, compareSelector |
groupJoin | inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector |
indexOf | item |
insert | index, second |
intersect | second, compareSelector |
isEmpty | |
join | inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector |
last | predicate |
lastIndexOf | item |
lastOrDefault | predicate, defaultValue |
letBind | func |
log | selector |
max | selector |
maxBy | keySelector |
memoize | |
merge | |
min | selector |
minBy | keySelector |
ofType | type |
orderBy | keySelector |
orderByDescending | keySelector |
pairwise | selector |
partitionBy | keySelector, elementSelector, resultSelector, compareSelector |
reverse | |
scan | seed, func |
select | selector |
selectMany | collectionSelector, resultSelector |
sequenceEqual | second, compareSelector |
share | |
shuffle | |
single | predicate |
singleOrDefault | predicate, defaultValue |
skip | count |
skipWhile | predicate |
sum | selector |
take | count |
takeExceptLast | count |
takeFromLast | count |
takeWhile | predicate |
toArray | |
toDictionary | keySelector, elementSelector, compareSelector |
toJoinedString | separator, selector |
toJSONString | replacer, space |
toLookup | keySelector, elementSelector, compareSelector |
toObject | keySelector, elementSelector |
trace | message, selector |
traverseBreadthFirst | func, resultSelector |
traverseDepthFirst | func, resultSelector |
union | second, compareSelector |
weightedSample | weightSelector |
where | predicate |
write | separator, selector |
writeLine | selector |
zip |
JavaScriptで使用可能な関数のリファレンスが欲しいですね。
まぁ、.NETのLINQを移植したものなので、そちらを
確認したらよいのかもしれませんが。