首页 前端知识 Vue2:npm的几个报错问题

Vue2:npm的几个报错问题

2024-09-01 23:09:29 前端知识 前端哥 968 94 我要收藏

最近接手了一个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.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17478.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!