![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
Vue2:npm的几个报错问题
1)tough-cookie、xlsx、node-fetch、phantomjs-prebuilt@2.1.16、chromedriver装不上,起不来,构建不成功。2)npm install时,抛错Maximum call stack size exceeded
最近接手了一个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.
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)