npm関連の話

Vue.jsでの開発を行う上で遭遇したエラー等について得た情報のまとめ

# 自分語り
自分用にMarkDownで書かれた文章に目次をつけるプログラムを組んだので公開します
VS Codeとかにはデフォルトであるみたいですが自分でいじれた方がいいかなと思ってつくってみました
自分がQiita等書くにはちょうどいい感じです
言語はpythonです

[mdIndex](https://github.com/danayeon/mdIndex)

# 目次
 - npm ERR! Cannot read property 'match' of undefined
 - パッケージのバージョン管理
  -  バージョンの確認
  -  npm-check-updatesが便利
 - npm audit
 - Error: Cannot find module 'webpack-cli/bin/config-yargs'
 - compilation.mainTemplate.applyPluginsWaterfall is not a function

# npm ERR! Cannot read property 'match' of undefined
`npm install`を行った際に遭遇
`package-lock.json`とのズレがあると起こるらしいので`package-lock.json`を消してやると解決
### 参照ページ
https://qiita.com/mojirico/items/8db742fa5f22e3e719c4
https://www.nekoni.net/Blog/Article/npm-err-cannot-read-property-match-of-undefined

# パッケージのバージョン管理
## バージョンの確認
通常

```bash:terminal
npm list --depth=0 # インストール済みの全てのパッケージ

npm outdated # 古くなったパッケージ
# 各列の意味
# Current => 現在インストールされているバージョン
# Wanted  => package.jsonのsemverを満たす最新のバージョン
# Latest  => 最新バージョン
```

## npm-check-updatesが便利

```bash:terminal
npm install -g npm-check-updates # インストール

ncu # 現在のバージョンと最新バージョン
ncu -u # package.jsonの更新
ncu -a # マイナーバージョン以下アップデートについても更新
```
### 参照ページ
https://dackdive.hateblo.jp/entry/2016/10/10/095800

# npm audit
`npm install`時などに脆弱性を警告されたパッケージについての処理
1. `npm audit`で脆弱性のあるパッケージを一覧表示
2. `npm i [パッケージ名] -D`で修正済みパッケージをインストール
3.  `npm ls [パッケージ名]`でパッケージの依存関係を確認
4. 上記実行時に`deduped`を表記されているパッケージを削除(FinderでもOK)
5. `npm dedupe`で依存関係を整理

package.jsonの更新を自動化すればもっと楽らしい

### 参照ページ
https://qiita.com/hibikikudo/items/0af352acac85fce28ec2

# Error: Cannot find module 'webpack-cli/bin/config-yargs'
`sass-loader`等を使い始めてから`npm run dev`で吐かれたエラー
`webpack`、`webpack-cli`、`webpack-dev-server`のバージョンの組み合わせの問題らしい
全て最新版をインストール

```bash:terminal
npm isntall --save-dev webpack@latest # webpack

npm install webpack-cli -D # webpack-cli

npm isntall --save-dev webpack-dev-server@latest # webpack-dev-server

npm install vue-loader@latest # vue-loader
```

### 参照ページ
https://qiita.com/Shoryu_N/items/9ae2417489c9faaa271c

# compilation.mainTemplate.applyPluginsWaterfall is not a function
パッケージの脆弱性を解決すると消えた

### 参照ページ
https://qiita.com/mitsuya_bauhaus/items/c31b146fb9649469f8d1

# npmERR! code ELIFECYCLE
`npm run dev`実行時に発生
特定のエラーを指すものではないようなので、続くエラー文を読んで対応するのがいいと思う
一応、`node_modules`フォルダを再インストールで解決はするっぽい

```bash
rm -rf node_modules
rm package-lock.json

npm install
```
### 参照ページ
https://note.com/koushikagawa/n/ne58862ebd22d

# TypeError: merge is not a function
`npm run dev`実行時に発生したエラー
maergeの定義の仕方が間違っているらしい
いじったつもりがなくても要確認
Vue.jsでは、トップのディレクトリの`config`フォルダ内にある`dev.env.js`の記述

```js:dev.env.js
const merge = require('webpack-merge') //これを

const {merge} = require('webpack-merge') // こう
```

### 参照ページ
https://stackoverflow.com/questions/62846123/getting-error-from-webpack-cli-typeerror-merge-is-not-a-function-in-webpack

# Error: Cannot find module '@babel/core'
こんな要求が来る

```bash
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'ba
bel-loader@7'.
```
`babel/core`、`babel-loader@7`をインストール

```bash
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader@7
```

### 参照ページ
https://qiita.com/SwuBHj8aKGqBKHet/items/c57b57c5db03d8208bec

# vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
npmというよりはwebpackのエラー

とりあえず`vue-loader`をインストール

```bash
npm install vue-loader --save-dev
```
webpaxck.conf.jsに以下を追記

```js
const { VueLoaderPlugin } = require("vue-loader");

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
```

### 参照ページ
https://qiita.com/7110/items/0721525ed6ccc263768b