2018/10/28

全然わからない、俺は雰囲気でnpmを使ってる（vulnerabilitiesなんとかした）

筆者イメージ


TL;DR

などと泣いてても何も変わらないのでキリキリ修正しましたʕ◔ϖ◔ʔ

vulnerabilities撲滅


巷の情報を調べてみると、npm auditで確認できるとのこと。やってみました。
ʕ◔ϖ◔ʔ >  npm audit
                                                                                
                       === npm audit security report ===                        
                                                                                
# Run  npm install --save-dev babel-preset-env@1.7.0  to resolve 123 vulnerabilities
（中略）
found 162 vulnerabilities (159 low, 2 high, 1 critical) in 4176 scanned packages
  run `npm audit fix` to fix 154 of them.
  8 vulnerabilities require semver-major dependency updates.
あー、、うん、ひどいね。ほんと、ごめんなさい(´・ω・｀)

指示に従ってnpm audit fixで直してもらいましょう。
ʕ◔ϖ◔ʔ >  npm audit fix
(中略)
+ babel-preset-env@1.7.0
+ chart.js@2.7.3
+ babel-core@6.26.3
added 679 packages from 534 contributors in 8.917s
fixed 154 of 162 vulnerabilities in 4176 scanned packages
  2 package updates for 8 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
あっれぇ、全部なおらんかった。。--forceつけて実行したらええのやろか？(´・ω・｀)

やってみる。
ʕ◔ϖ◔ʔ >  npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.
(中略)
+ webpack-dev-server@3.1.10
+ webpack@4.23.1
added 279 packages from 139 contributors, removed 113 packages, updated 133 packages and moved 4 packages in 19.13s
fixed 9 of 9 vulnerabilities in 4177 scanned packages
  2 package updates for 8 vulns involved breaking changes
  (installed due to `--force` option)

う、、ごめん、実はイマイチ分かってないの(´・ω・｀)
npm WARN using --force I sure hope you know what you are doing.

確認してみる。
ʕ◔ϖ◔ʔ >  npm audit
                                                                                
                       === npm audit security report ===                        
                                                                                
found 0 vulnerabilities
 in 10305 scanned packages
直った・・のか？(´・ω・｀)

ビルドできるようにする


よしよし脆弱性にも対処できたし、ビルドしてみっか！
ʕ◔ϖ◔ʔ >  npm run build
(中略)
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
うん、ごめんなさい(´・ω・｀)

不足しているパッケージの追加や手動アップデート

指示に従ってインストール。
ʕ◔ϖ◔ʔ >  npm install -D webpack-cli
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@7.1.2 requires a peer of webpack@2 || 3 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@1.1.4 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.2
added 10 packages from 5 contributors and audited 10416 packages in 4.127s
found 0 vulnerabilities
自分で考えて手動で更新が必要なようだ。。

できればwebpackは4.x系を使うように変更したいので、babel-loaderやfile-loaderを更新することにしました。babel-loaderのnpmパッケージ公式情報を確認して、以下のようにしました。
ʕ◔ϖ◔ʔ >  npm install -D babel-loader @babel/core @babel/preset-env webpack
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@1.1.4 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

+ @babel/core@7.1.2
+ @babel/preset-env@7.1.0
+ babel-loader@7.1.5
+ webpack@4.23.1
added 106 packages from 18 contributors, updated 4 packages and audited 11763 packages in 10.841s
found 0 vulnerabilities

さらに他のパッケージも不足分を足したりアップデートしたりするため、以下のようにしました。
ʕ◔ϖ◔ʔ >  npm install -D ajv@^6.0.0 file-loader
+ ajv@6.5.4
+ file-loader@1.1.11
removed 3 packages, updated 5 packages and audited 11770 packages in 4.904s
found 0 vulnerabilities

webpack v4.x系へ移行したのに伴う修正

では気を取り直してビルド！
ʕ◔ϖ◔ʔ >  npm run build
(中略)
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
(後略)
あかーん（白目

巷の情報から、どうやらwebpackを4.x系に変更した影響のようだと判断したのでModeの記述を読みつつ、以下のように修正しました。

ぐぬぅ、通りませぬ(´・ω・｀)
ʕ◔ϖ◔ʔ >  npm run build
(中略)
ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
    at Object.module.exports ...
(後略)

該当しそうなIssueを見つけました。あー・・うん、vue-loaderアップデートしてなかったです。
ʕ◔ϖ◔ʔ >  npm install -D vue-loader@14.x
+ vue-loader@14.2.3
updated 2 packages and audited 11770 packages in 4.819s
found 0 vulnerabilities

やったね、やっとビルド通ったよ(ヽ´ω`)ノシ
ʕ◔ϖ◔ʔ >  npm run build
(中略)
Hash: 3896881fd39d789d90ac                                                                
Version: webpack 4.23.1
Time: 8663ms
Built at: 2018/10/28 20:29:08
       Asset      Size  Chunks                    Chunk Names
    build.js   506 KiB       0  [emitted]  [big]  main
build.js.map  1.98 MiB       0  [emitted]         main
Entrypoint main [big] = build.js build.js.map

振り返り


  • npm auditめっちゃ良いヽ(´ー`)ノ
  • ちょっとだけ・・npmアレルギー改善した・・かも・・
  • webpackと使ってるパッケージの関係性が、まだ難しい。
    • パッケージ公式の情報をしっかりチェックすべきなんですよね。。
at
Labels: ,