Vue2：npm的几个报错问题

最近接手了一个Vue项目，依赖装不上，项目起不来，构建不成功。依赖包靠手手相传，实在不是我的style。决定把package.json文件修改到，依赖可以通过npm安装的程度，下面是遇到的一些问题的小结。

Q1：tough-cookie

webpack build 时，报错

ERROR in static/js/vendor.954a5922e37a66b6e044.js from UglifyJs
Name expected [./~/tough-cookie/lib/cookie.js:40,0][static/js/vendor.954a5922e37a66b6e044.js:75463,6]

分析：UglifyJs 只支持 ES5 ，而 tough-cookie 包含 ES6 的写法，导致 webpack 打包失败

解决方案：

webpack.base.conf.js文件

  module: {
      rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              include: [
                  resolve('src'), 
                  resolve('test'),      
                  resolve('/node_modules/tough-cookie/lib') // 添加当前行
              ]
          },
          ...
      ]
  }

Q2：xlsx

webpack build 时，报错

ERROR in static/js/59.35c6a83ee278132edd8b.js from UglifyJs
Unexpected token: name (_fs) [./~/xlsx/xlsx.mjs:3163,0][static/js/59.35c6a83ee278132edd8b.js:3435,4]

原因还是xlsx包含ES6 的写法

A1：在webpack.base.conf.js文件，针对mjs后缀，专门处理

  module: {
      rules: [
          { // 添加当前对象
              test: /\.mjs$/,
              loader: 'babel-loader',
              include: [resolve('/node_modules/xlsx')]
          },
          ...
      ]
  }

A2：version为0.18.x 的包，包含es6语法，但0.17.x不包含。可修改package.json文件，"xlsx": "^0.17.0"，再安装xlsx即可。

Q3：node-fetch

npm run dev时，报错

error  in ./~/node-fetch/src/index.js

Module parse failed: ...e\node_modules\node-fetch\src\index.js Unexpected token (151:12)
You may need an appropriate loader to handle this file type.
| try {
|   locationURL = location === null ? null : new URL(location, request.url);
| } catch {

分析：3.x 版本需要匹配 12.20.0及以上版本的Node。

A：在无法保证所有团队小伙伴的node版本情况下，我选择给node-fetch优雅降级

"node-fetch": "^2.6.0",

Q4：phantomjs-prebuilt@2.1.16

npm install时，报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! phantomjs-prebuilt@2.1.16 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.16 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

再往上看代码，有

npm WARN deprecated phantomjs-prebuilt@2.1.16: this package is now deprecated
npm WARN deprecated istanbul@0.4.5: This module is no longer maintained, try this instead:
npm WARN deprecated   npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated log4js@0.6.38: 0.x is no longer supported. Please upgrade to 6.x or higher.
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2

明明白白告诉你 phantomjs-prebuilt已被弃用。

A1：凑合继续用的

npm install phantomjs-prebuilt@2.1.16 --ignore-scripts

A2：世上无难事，只要肯放弃。这个项目，之所以用到这个包是因为有单元测试，其中用到了karma，配套了这些个东西。实际上，整个单元测试都没用到，直接被我从package.json文件中删除了。从此，世界安静了。。。

Q5：chromedriver

npm install时，报错

Current existing ChromeDriver binary is unavailable, proceding with download and extraction. 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.46.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chromedriver@2.46.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above

A1：看别人的报错有， Downloading from file，Saving to file。。

给的解决方案是切换淘宝镜像去安装chromedriver。

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

A2：简单的了解了一下chromedriver，是Chrome浏览器服务的一部分，并且是Selenium自动化测试框架中的一个重要组件。就像4中的karma一样，直接被我舍弃了。

Q6：npm install时，抛错Maximum call stack size exceeded

npm install
npm ERR! Maximum call stack size exceeded

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\4704456\AppData\Roaming\npm-cache\_logs\2024-01-31T08_48_39_911Z-debug.log

尝试1：先删除node_modules，再npm install --无效
尝试2：先npm cache clean --force，再npm install --无效
尝试3：升级npm。直接升级node, 14.15.3 --> 16.16.0，再npm install。 --无效，安装了一个多小时，也没成功。
尝试4：先删除 package-lock.json，再npm install --OK (本次尝试成功了，但不知尝试2起了多大作用，另：node版本被回滚，在用版本是【14.15.3】)。

Q7：docx-preview -- vue-cli3

引用docx-preview依赖包时报错

error in ./node_modules/docx-preview/dist/docx-preview.mjs

Module parse failed: Unexpected token (95:54)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| function hasXmlParserError(doc) {
>     return doc.getElementsByTagName("parsererror")[0]?.textContent;
| }
| function removeUTF8BOM(data) {

分析：webpack 原生只支持 js 文件类型，及 es5 的语法。默认不对 node_modules 下的包进行编译，项目引用的包含ES6的语法。

解决方法：webpack 编译这个npm包。

A：

// vue.config.js
module.exports = {
...
  transpileDependencies: [
    'docx-preview',
  ],
...
}

配置完，需项目重启。

Q8：caniuse-db

npm install时，报错

npm ERR! code 404
npm ERR! 404 Not Found - GET http://.../caniuse-db/-/caniuse-db-1.0.30001599.tg
npm ERR! 404 
npm ERR! 404 ’caniuse-db@ 1.0.30000634’ is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

分析：内网开发，内网镜像中包不全，部分老旧的依赖包被清理。导致找不到对应版本的依赖。

caniuse-db在 package.json文件中不包含，这个项目也没package-lock.json文件。
查看了caniuse-db依赖包的README文件，并没有一行Installation的说明，需要单独安装这个依赖。

可得，这个包是别的包的依赖包。

A：

Step1：在node_modules文件夹下全局搜索 dependencices包含 "caniuse-db" 的 .json文件，我的这个项目定位到了是autoprefixer。
Step2：在package.json查看到，"autoprefixer": "6.7.7"。被固定了版本。在版本号前加个^，即："autoprefixer": "^6.7.7"
Step3：npm install

Tip:

1）-optional

npm install utf-8-validate --save-optional

package.json文件会生成如下内容：

{
  "devDependencies": {
  },
  "optionalDependencies": {
    "utf-8-validate": "^6.0.3"
  }
}

optionalDependencies：放置一些项目中可忽略其各种错误的包模块，可选包模块。和devDependencies同一级别。在代码运行或安装模块的时候，就算失败报错了也会正常运行。

同时，该配置会覆盖掉 dependencies 里的包，不要重复添加。

2）快速删除node_modules文件

方式1：Windows系统

step1、cmd打开命令提示符窗口或直接在webstorm的Terminal，输入后回车

 del .\node_modules\

step2、命令行会询问用户

确认                                                                                                                                                          
..._vue\node_modules\ 处的项具有子项，并且未指定 Recurse 参数。如果继续，所有子项均将随该项删除。是否确实要继续? 
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“Y”):

直接回车即可

说明：比直接delete键删除文件快一些，但每次并不能彻底删除node_modules文件。需手动删除

方式2：

npm install rimraf -g // 全局安装依赖
rimraf node_modules // 删除时执行该命令即可

文件删的很彻底，最优解。

The End.