最近接手了一个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.
文章来源
您阅读本篇文章共花了：
发表评论