最初のpackage.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "^1.7.0",
    "babelify": "^8.0.0",
    "browser-sync": "^2.26.7",
    "browserify": "^16.5.0",
    "classnames": "^2.2.5",
    "eslint": "^6.8.0",
    "gulp": "^4.0.2",
    "gulp-eslint": "^6.0.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-webpack": "^1.5.0",
    "vinyl-source-stream": "^2.0.0",
    "vue-devtools": "^5.1.3",
    "webpack": "^3.12.0",
    "webpack-stream": "^5.2.1"
  },
  "babel": {
    "presets": [
      "babel-preset-env"
    ]
  }
}

fseventsのインストール

npm installで以下のようなエラーが出る。

node install

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.3/fse-v1.2.3-node-v72-darwin-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for fsevents@1.2.3

調べてみると、fsevents系のパーミッションエラーらしい。

手っ取り早いのが、node.jsのバージョンを下げることだが、他のところで、影響が出るのは嫌なので、バージョンを下げずに進める。

まず、fsevents最新版をインストールする。

参考：https://qiita.com/MasamotoMiyata/items/0fdad60d80687fb01909

natives,のインストール

natives関連のエラーが出たので、こちらも最新版をインストールする。

npm auditで出た問題

インストールはできたとして、

gulpコマンドを実行すると、以下のものが出る。

npm update extend –depth 3

primordials is not defined

これも、バージョンの違いによるものらしい。

run : npm install –save-dev gulp@4.0.2 と、でたので

そのように打つと、gulpがインストールされる。

さらに、

npm auditをすると問題がわかるとのことで、それを打つと、以下のものが出る。

High          │ Regular Expression Denial of Service   

正規表現のサービス拒否

│ Package       │ minimatch    

High          │ Prototype Pollution          

プロトタイプ汚染

│ Package       │ lodash    

Low           │ Regular Expression Denial of Service        

│ Package       │ braces  

以上のような内容が出る。

調べてみると、

正規表現をつかったDoS攻撃を受ける危険性があるというものだった。

また、表には ” Dependency of ” というように、依存するパッケージも示されている。

よくわからないので、

それぞれのパッケージをupdateする。

その後、gulpコマンドを打つと、

ERR! peer dep missing: webpack@2 || 3, required by babel-loader@7.1.1　

と、出るので、

npm ls webpack　として、webpackの依存関係を調べ、

sample@1.0.0 /Applications/MAMP/htdocs/vue_sample01

├─┬ gulp-webpack@1.5.0

│ └── webpack@1.15.0

├── UNMET PEER DEPENDENCY webpack@4.41.5

└─┬ webpack-stream@5.2.1

  └── UNMET PEER DEPENDENCY webpack@4.41.5  deduped

以上のように出るので、webpackを一度削除して、バージョン３系でインストールし直した。

これで、gulpが走るようになった。

参考：https://qiita.com/hibikikudo/items/0af352acac85fce28ec2

他にも、eslint, vue-devtoolsでも問題が発生したので次回とする。

【楽天1位】ノートパソコンスタンド パソコンスタンド 折りたたみ式 ノート PCスタンド 改良版 アルミ合金製 ホルダー 高さ 角度調整可能 滑り止め 軽量 姿勢改善 Macbook/Macbook Air/Macbook Pro/iPad//タブレットなど9～17インチまでに対応