前端构建报错排查

一. 首先检查 node 版本和 npm 版本

• 检查node版本

node -v

• 检查npm版本

npm -v

由于现在使用的都是8.16或10.15的node版本的构建镜像，理论上这一步不会有问题。

二. 查找前端构建命令

在前端的代码工程中，找到文件：package.json

在这个文件中找到scripts属性:(跟如下类似)

"scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

根据产品线需要执行scripts属性中的命令;

三. 设置编译构建命令：

1. 设置私库地址

npm set registry http://xx.xx.xx.xx/repository/npm-group/;

如果在系统配置下的编译构建工具中设置了本地私库地址，并且在流水线中编译构建工具使用的是 “node/私库地址",那么此条命令就可以不加。

2. 检查代码中是否有 package-lock.json 文件，如果有这个文件，将此文件删除。
3. 执行构建:

• 安装依赖:

npm install -verbose;

-verbose 参数是为了看到当前安装的具体进度。

• 执行构建:

npm run 构建命令

此处的构建命令是第二步的构建命令

四. 解决私库取不到node-sass等从GitHub或其他途径获取插件的问题

在安装依赖(npm install)前
先设置proxy:

npm config set proxy http://xx.xx.xx.xx/repository/npm-group/;

在设置node-sass的下载地址:

export SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass;

注意：这里的构建工具的node是8.x版本的，10.x的版本中有一个gyp插件的缘故会导致安装node-sass失败。除了 node-sass ,还有 electron、node-sqlite3 等一些非正常私库中常有的插件，采用同样的方式进行安装

electron:

export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

node-sqlite3:

export SQLITE3_BINARY_SITE=http://npm.taobao.org/mirrors/sqlite3

五： 解决npm本身报错问题

有时在构建打包的过程中会遇到如下问题:

报错1：

error Unexpected end of JSON input while parsing near '...https://registry.npmj'

报错2：

npm WARN tar ENOENT: no such file or directory, open '/home/workspace/cdp/deppon-test/devops-web/node_modules/.staging/xlsx-8f9eee71/dist/xlsx.full.min.map'

解决方案

1. 请先检查构建的代码中是否存在package-lock.json文件，

a. 在安装依赖(npm install) 之前执行命令:

rm package-lock.json;

b. 在Git中删除此文件，重新构建

2. 在安装依赖(npm install) 之情执行命令:

npm cache clean --force

强制清除npm的缓存

然后再重新构建，可以解决大部分npm非开发代码问题的报错。

六： 解决项目中插件版本问题

有时候，在打安装依赖的过程中遇到以下警告:

npm WARN tarball tarball data for [email protected] (sha1-jc6Sqg3VU7ULxb+7kK+Zhq2EWhI=) seems to be corrupted. Trying one more time.

以 npm WARN tarball 开头, seems to be corrupted. Trying one more time. 结尾的报错，此时npm 会陷入无限循环安装中。

解决方案:

本地开发的目录中，删除 node_modules 这个目录，如果有 package-lock.json 文件，也删除。然后重新执行

npm install

然后在执行:

npm audit fix

附:查看版本问题，执行命令

npm audit

在依赖安装完毕以后，先在本地尝试打包构建，本地打包构建通过了，再将代码提交到Git，再进行打包构建即可。

七： 解决执行Build 完事以后找不到dist目录的问题

当构建的代码目录不是在代码工程的根目录，在执行构建的时候，执行了

cd xx/xx

此时Build完事以后，dist目录在 xx/xx/dist ,对于这种项目，要在应用程序基本信息中，设置构建输出目录为: xx/xx