Minify対応 - Githubissues

対応方針

結論：webpackを使う
理由：目的を充足できるモジュールバンドラーで、ほぼ一人勝ちのOSSなので
他に検討した候補：minifyサービスの利用、gruntやgulpでminify
要件
1. インターネットにつながらない環境等に容易に持ち込めるようにする html,js,cssをできるだけ小さなメール添付できるサイズの1ファイル(※)にする ※ そのために、現状、画像を使わず、リリース時に手で1ファイルにまとめてたファイルを作成
2. 開発に最適な単位(※)でソースファイルを分割したい ※ 現状、手で1ファイルにまとめる手間との妥協で、2Ks前後×4ファイル
3. 採用ツールは長期利用できるよう、OSSかつほぼ(※)デファクトスタンダードの地位を確立したもの開発環境はwindows端末に閉じた、eclipseとnodejsを前提 ※ フロントエンド界隈は3年で主流が変わるので「ほぼ」

参考

webpack入門 webpack3入門 webpackとは

おまけ

node.js バージョンアップ(v8以降推奨のため）　- > jsdoc が動かなくなったので、v6.10.3に戻した 👎
1. 現行バージョン確認 node -v -> v6.10.3
2. インストーラ実行　https://nodejs.org/ja/
3. 導入確認 node -v -> v8.9.3 🆗
4. デグレ確認　 jsdoc -c "C:\Users\A\Desktop\wbat\git\hirosejn\HJN\hjn_kashima_jsdoc_conf.json" 要対処Error: EPERM: operation not permitted, copyfile 'C:\Users\A\Desktop\wbat\JavaScript_GoogleDrive\jsdoc3\jsdoc3-jsdoc-dd905a2\templates\default_HJNcustom\static\fonts\OpenSans-Bold-webfont.eot' -> 'C:\Users\A\Desktop\wbat\git\hirosejn\HJN\jsdoc\fonts' 🆖 npm cache clean　-> 解消せず node.js アンインストール　v8.9.3 再インストール　-> 解消せず node.js アンインストール　v6.10.3 インストール -> 復活

実験導入

導入手順

webpack インストール
1. cd C:\Users\A\Desktop\wbat\JavaScript_kashima_201712 (PATHに追加) ※ フォルダ名にwebpackフォルダがあるとインストール時にエラーとなる
2. npm init -y -> ./package.json 作成
3. package.json 修正 { "scripts": { "build": "webpack" }, "devDependencies": { "webpack": "^3.10.0" } }
4. npm i -D webpack -> 　webpack導入（./node_modules作成）
5. npm i -D webpack webpack-dev-server -> 修正を自動取り込みしWindows内にWebサーバを立てる
6. npm install html-loader —save-dev -> HTMLをバンドルする
7. npm install css-loader —save-dev npm install style-loader —save-dev -> CSSをバンドルする
8. npm install url-loader —save-dev -> 画像をbase64にしてバンドルする

webpack実行

Node.jsコンソールで、package.json のディレクトリに移動 cd C:\Users\A\Desktop\wbat\JavaScript_kashima_201712
JSをバンドルする npm run build
Windows上で動作確認 npm rurn start して、chrome(61以上)から http://localhost:8081/ にアクセス

サンプルソース

前提ブラウザ(chrome 61[2017/8]以上)でバンドル前のソースでデバッグし、そのままwebpack(Node.js上)でバンドルし疎通確認 HTML のSCRIPTタグから importしJSの hello()を呼び出す HTMLは、type="module" の指定がないとimportを予約語と認識しないので構文エラーとなるブラウザでは、Node.js の require を認識しないので import で記述ブラウザではパスおよび拡張子 .js の指定が必須（Node.jsなら省略可能）ブラウザでは、ファイルサーバ上のjavascriptのimportは、エラーとなるためWebサーバアクセス要（ Index_module.html:1 Access to Script at 'xxx.js' from origin 'null' has been blocked by CORS policy: Invalid response.

package.json

{
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"devDependencies": {
"html-loader": "^0.5.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}

webpack.config.js

const webpack = require('webpack');
module.exports = {
entry: `./src_x/main.js`,         // メインとなるJavaScriptファイル（エントリーポイント）
output: {                         // ファイルの出力設定
path: `${__dirname}/dist_x`,    // 出力ファイルのディレクトリ名
filename: 'bundle.js'           // 出力ファイル名
},
module: {
  loaders: [                    // `-loader`は省略可能
      { test: /\.html$/, loader: 'html-loader' }, // htmlを読み込むローダー
      { test: /\.css$/, loaders: ['style-loader','css-loader'] }, // cssを読み込むローダー
      { test: /\.(jpg|png|gif)$/, loaders: 'url-loader' }  // ファイルを読み込むローダー
  ]
},
devtool: 'source-map',            // ソースマップを有効にする
plugins: [
new webpack.optimize.UglifyJsPlugin({ // バンドルしたJSをminifyする
  sourceMap: true               // minify時でもソースマップを利用する
})
],
devServer: {                      // ローカル開発用環境を立ち上げる
contentBase: './',              // './src'と'./dist'の両方が見える場所
port: 8081      // ブラウザで http://localhost:8081/ でアクセスできるようになる
}
};

./src_x/index_original.html

<!doctype html>
<html lang="ja">
<head><meta charset="UTF-8"><title>index_html</title></head>
<body>
<p>バンドル前の開発用html、main.jsの処理を通常のhtmlで記述</p>
<p>loader指定(html,CSS,ファイル(画像)）のimportは、ブラウザでは効かない(JSとみなしてエラーとなる)</p>
<div id='box'></div>
<link type="text/css" rel="stylesheet" href="./app.css">
<script>
    var png = './image.png';
    var imgPng = document.createElement('img');
    imgPng.src = png;
    document.getElementById('box').appendChild(imgPng);
</script>
<script type="module">
    import {hello} from "./sub.js";
    hello();
</script>
</body>
</html>

./src_x/index_bandle.html

<!doctype html>
<html lang="ja">
<head><meta charset="UTF-8"><title>index_html</title></head>
<body>
　　これが表示されたら、bundle.js 失敗
<script type="module" src="../dist_x/bundle.js"></script>
</body>
</html>

./src_x/main.js

// htmlの取込とDOMへ反映
import app_html from './app.html';
document.body.innerHTML = app_html;
//cssの取り込み
import css from './app.css';
//画像（ファイル）の取込とDOMへ反映
import png from './image.png';
var imgPng = document.createElement('img');
imgPng.src = png;
document.getElementById('box').appendChild(imgPng);
//JSの取込、JSのみネスト可
import {hello} from "./sub.js";
window.addEventListener("DOMContentLoaded",function(eve){
hello();      //　先頭JS関数を呼ぶ、htmlの表示よりJS(hello())が先に処理される
});

./src_x/app.html

<meta charset="UTF-8">
<div id='box'></div>
<p>css読込み：アンダーラインがあれば成功、画像読：画像があれば成功、JS読込：alertが表示されれば成功</p>
<p>bundle.jsを読込むscriptタグはhtmlのbodyにあることが必要(htmlのheadではDOM操作できない)</p>
<p>文字化けするときはmetaタグを指定する、BODYタグ内の指定で効く</p>
<p>type="module" の指定がないとimportを予約語と認識しないので構文エラーとなる</p>
<p>ブラウザではパスおよび拡張子 .js の指定が必須（webpackのみなら省略可能）</p>
<p>ブラウザ(chrome[60以上])では、ファイルサーバ上のjavascriptのimportは、以下のエラーとなるため、webサーバ経由でアクセス要</p>
<p>Index_module.html:1 Access to Script at 'xxx.js' from origin 'null' has been blocked by CORS policy: Invalid response. </p>
<p>loader指定(html,CSS,ファイル(画像)）スクリプト内では、importは効かない(JSとみなしてエラーとなる)、HTML内のSCRIPTタグは効かない、LINKタグは読込まれる</p>

./src_x/app.css
```
p {    border-bottom: 1px solid #ccc; }
```

./src_x/sub.js

export {hello}; // export文を使ってhello関数を定義する。
import {message1, message2} from './message.js';
function hello() { alert(message1() + message2()); }

./src_x/message.js

export {message1, message2}
function message1() { return "message1"; }
function message2() { return "message23"; }

参考：

インストール　webpack 3入門(図解付き)
CORSエラー対策
HTML,CSS,画像バンドル　WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】
webpackでcssとimageをバンドルする
npmとwebpackでビルド - jQueryからの次のステップ
webpackで混乱したので、簡単な構成でJS、CSS、IMGをバンドル化してみる

本導入(hirosejn/HJN)

導入手順

nodejsインストール
1. v6.10.3 の node-v6.10.3-x64.msi をダウンロードして実行
webpack インストール
1. ユーザの環境変数の Path に C:\Users\A\Desktop\wbat\git\hirosejn\HJN 追加　システムのプロパティの詳細設定タグの [環境変数]
2. cd C:\Users\A\Desktop\wbat\git\hirosejn\HJN (PATHに追加) ※ フォルダ名にwebpackフォルダがあるとインストール時にエラーとなるので削除 ※ githubに登録しているフォルダ　　githubにwebpack本体が登録されないようにする場合は上位フォルダを指定　　横並びだとソースディレクトリを指定できない
3. npm init -y -> ./package.json 作成
4. package.json 修正 { "scripts": { "build": "webpack" }, "devDependencies": { "webpack": "^3.10.0" } }
5. npm i -D webpack -> 　webpack導入(14.4MB)（./node_modules作成）
6. npm i -D webpack webpack-dev-server -> 修正を自動取り込みしWindows内にWebサーバを立てる(計26.0MB)
7. npm install html-loader —save-dev -> HTMLをバンドルする(計28.8MB)
8. npm install css-loader —save-dev (計56.3MB) npm install style-loader —save-dev -> CSSをバンドルする(計56.3MB)
9. npm install url-loader —save-dev -> 画像をbase64にしてバンドルする(計56.3MB)
10. npm install jsdoc --save-dev -> 別目的（下記、jsdoc3復活）(計60.6MB)
  webpack 設定動作確認
11. ./sandbox/webpack/sec_x 配下に、【実験導入】のソースを配置
12. package.json に以下を指定 { "scripts": { "build": "webpack", "start": "webpack-dev-server" },
13. webpack.config.js で以下のパスを指定
```
module.exports = {  entry: `./sandbox/webpack/src_x/main.js`,
output: {
path: `${__dirname}/sandbox/webpack/dist_x`,
filename: 'bundle.js'
},
```

webpack実行

Node.jsコンソールで、package.json のディレクトリに移動 cd C:\Users\A\Desktop\wbat\git\hirosejn\HJN
JSをバンドルする npm run build
Windows上で動作確認 npm run start して、chrome(61以上)から http://localhost:8081/ にアクセス　※ html更新時は自動更新されず、キャッシュが再利用されるため、再起動が必要

モジュール分割

参考

レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例アロー関数が実装された・・「thisの参照が関数定義時に決まる」が魅力的だが、ie11で使えないので見送り webpackで共有ライブラリを使う&作るビルド設定：externals　　・・・ externals　： import せずにhtmlで取込むJSファイルを指定する webpackでjQueryに依存したライブラリを含めてビルドする・・・ plugins: [ new webpack.ProvidePlugin({ $: 'jquery' })　 ]　で$にjqueryを突っ込む方法

デグレ改修

[x] ie11 で画面が表示されない原因：ie11は、type="module" 指定した Githubissues.

Githubissues is a development platform for aggregating issues.

hirosejn / HJN

Minify対応 #67

対応方針

要件

参考

おまけ

実験導入

導入手順

webpack実行

サンプルソース

参考：

本導入(hirosejn/HJN)

導入手順

webpack 設定動作確認

webpack実行

モジュール分割

参考

デグレ改修