2018-01-30時点。
圧縮できなかった
bundle.jsファイルを圧縮しようとするも失敗。
$ webpack --optimize-minimize
Hash: 6d23a2e790698cac8368 Version: webpack 3.10.0 Time: 10556ms Asset Size Chunks Chunk Names ./bundle.js 566 kB 0 [emitted] [big] main ./bundle.js.map 736 kB 0 [emitted] main [12] ./front.js 1.43 kB {0} [built] [66] (webpack)/buildin/module.js 517 bytes {0} [built] [67] (webpack)/buildin/global.js 509 bytes {0} [built] + 74 hidden modules ERROR in ./bundle.js from UglifyJs Unexpected token: operator (>) [/tmp/env/node/markdonwnit/node_modules/markdown-it-anchor/index.js:3,0][./bundle.js:18973,19]
調査
ES6構文
エラーログにあった/tmp/.../node_modules/markdown-it-anchor/index.js
の3行目をみてみる。
const slugify = s =>
=>
というのは関数定義の省略記法。ES6という新バージョンの言語シンタックス。
https://qiita.com/morrr/items/883cb902ccda37e840bc#%E3%82%A2%E3%83%AD%E3%83%BC%E9%96%A2%E6%95%B0
babelインストール
問題はES6のコードはそのままだと使えないこと。babel-loader
をインストールする必要がある。
https://qiita.com/HayneRyo/items/74892d3a37ee96a5df60
$ npm install babel-core babel-loader babel-preset-react babel-preset-es2015
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + babel-loader@7.1.2 + babel-preset-es2015@6.24.1 + babel-preset-react@6.24.1 + babel-core@6.26.0 added 94 packages in 29.866s
webpack.config.js
後半のmodule: {...
を追記した。'react'
は今回不要かもしれない。
module.exports = { entry: './front.js', output: { filename: './bundle.js' }, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, //loader: "babel", loader: "babel-loader", query:{ presets: ['react', 'es2015'] } } ] } };
webpack.config.jsの読み方、書き方 - dackdive's blog
圧縮(2回目)
ふたたび圧縮するも同じく失敗。
$ webpack --optimize-minimize
Hash: c52ad156f3e7301cb795 Version: webpack 3.10.0 Time: 11840ms Asset Size Chunks Chunk Names ./bundle.js 566 kB 0 [emitted] [big] main ./bundle.js.map 736 kB 0 [emitted] main [12] ./front.js 1.37 kB {0} [built] [66] (webpack)/buildin/module.js 517 bytes {0} [built] [67] (webpack)/buildin/global.js 509 bytes {0} [built] + 74 hidden modules ERROR in ./bundle.js from UglifyJs Unexpected token: operator (>) [/tmp/env/node/markdonwnit/node_modules/markdown-it-anchor/index.js:3,0][./bundle.js:18971,19]
uglifyjs-webpack-plugin インストール
webpack Unexpected token: operator (>)
でググる。
webpack - Unexpected token: operator (>) from UglifyJs - Stack Overflow
uglifyjs-webpack-plugin
なるものが必要?ググる。
【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法 - Qiita
$ npm install uglifyjs-webpack-plugin
> uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin > node lib/post_install.js npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + uglifyjs-webpack-plugin@1.1.8 added 43 packages, updated 1 package and moved 2 packages in 32.857s
webpack.config.js
以下を追記。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { ... plugins: [ new UglifyJsPlugin({uglifyOptions: {ecma: 6}}), ], ... }
圧縮(3回目)
失敗。でもログが変化した。 ./bundle.js 200 kB
になってる。./bundle.js 566 kB
だったので、半分以下。
$ webpack --optimize-minimize
Hash: c52ad156f3e7301cb795 Version: webpack 3.10.0 Time: 29328ms Asset Size Chunks Chunk Names ./bundle.js 200 kB 0 [emitted] main [12] ./front.js 1.37 kB {0} [built] [66] (webpack)/buildin/module.js 517 bytes {0} [built] [67] (webpack)/buildin/global.js 509 bytes {0} [built] + 74 hidden modules ERROR in ./bundle.js from UglifyJs TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/tmp/env/node/markdonwnit/node_modules/source-map/lib/source-map-consumer.js:20:20) at /tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:75:21 at Array.forEach (<anonymous>) at Compilation.<anonymous> (/tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:54:20) at next (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:204:14) at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/index.js:261:13 at step (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:90:11) at done (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:99:22) at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:105:15 at _class.boundWorkers (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:76:13) at enqueue (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:96:17) at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:116:11 at Array.forEach (<anonymous>) at _class.runTasks (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:94:13) at Compilation.<anonymous> (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/index.js:187:18) at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:206:13) at self.applyPluginsAsync.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:666:10) at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:195:46) at sealPart2 (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:662:9) at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:195:46) at Compilation.seal (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:605:8) at applyPluginsParallel.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compiler.js:504:17) at /tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:289:11 at _addModuleChain (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:507:11) at processModuleDependencies.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:477:14) at process._tickCallback (internal/process/next_tick.js:150:11)
ブラウザで開いてみるも真っ白
ブラウザで開いてみると何も表示されない。開発ツールでログを見ると以下のエラー。
Uncaught ReferenceError: $ is not defined
エラーそのままでググってみる。
jQueryに依存しているライブラリがある場合、jQueryを先にロードしないとこのエラーになるらしい。
$ is not defined
はそのままの意味で$
が未定義。ふつう、$
にjqueryのオブジェクトをセットするのが定番。jqueryに依存したライブラリも$
変数にjqueryオブジェクトがセットされている前提でコーディングされていると思われる。
webpackエラーログ
今回はブラウザでのエラー以前に、webpackコマンドの時点でエラーになっている。つまり、npmモジュールからブラウザで使えるjsコードに変換する最中で問題があるようだ。たぶんまだjsコードを吐き出しの途中だったのだろう。
エラーログの冒頭をみてみる。
ERROR in ./bundle.js from UglifyJs
ES6は圧縮できない?
ES6コードの縮小をサポートしていません。
圧縮(4回目)
失敗。
webpack.config.js
devtool: 'source-map',
をコメントアウトした。
//devtool: 'source-map',
$ webpack --optimize-minimize Hash: bb904e68e7ae6fa38efc Version: webpack 3.10.0 Time: 31182ms Asset Size Chunks Chunk Names ./bundle.js 200 kB 0 [emitted] main [12] ./front.js 525 bytes {0} [built] [66] (webpack)/buildin/module.js 517 bytes {0} [built] [67] (webpack)/buildin/global.js 509 bytes {0} [built] + 74 hidden modules ERROR in ./bundle.js from UglifyJs Invalid assignment [./bundle.js:1,178226]
エラー。ERROR in ./bundle.js from UglifyJs
が同じ。
以下も参照したが変わらず。
結論
ES6構文を使った圧縮はできない?
本筋からどんどん遠ざかるし、もう諦めた。