前端基建过程中踩了一个坑，用GPT给完美解决了！

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第28/100篇文章。
交流合作：brown_7778

前言

最近一直在分享三维可视化方向的内容，都快忘记自己的老本行是传统前端了。。

当然，其实可视化和前端也是密不可分的，特别是如果你要用webgl引擎去做三维可视化的话，其实还得让前端开发人员上！

所以，我认为前端能做的事情可太多了，常见的PC端，H5，小程序咱就不说了，基操了，还有跨端开发（安卓、IOS）、鸿蒙、大屏、三维、GIS，包括后端语言nodejs等等。

所以，以后请不要再说我们前端就是小鸡啄米了！我要为我的前端兄弟姐妹们正名！谁再说我跟谁急！

前情介绍

好了，言归正传吧。

最近我和团队的成员正在研发一款技术产品，涉及到Unreal游戏引擎+前端+nodejs。

主要功能是UE将数字孪生业务开发过程中常用到的三维功能，例如相机、POI点位、线、面、天气、特效类（辐射圈、迁徙线、流光等）、模型、材质、还包括GIS相关的一些功能等等吧，进行一个统一的接口封装，然后前端再统一封装成开发人员用起来比较顺手的API，并形成统一规范的接口文档。

这样一来，后期做三维可视化项目的时候，就会大大缩减UE开发的人工成本以及和前端沟通联调的成本，且代码也都统一规范化，方便后期维护。

OK，产品我就稍微提一嘴，最近在忙别的事情，后边有时间我将着重展示一下我们的研发成果。

那么在这个过程中呢，我主要负责产品的设计，接口文档的设计以及前端JSSDK的架构以及工程化搭建，基础Class类的封装，以及产品的运维管理平台也是我在做。

对，我就是那个牛马！但是一只快乐的牛马😊，因为这些事情是我喜欢且愿意做的。

CI/CD自动构建部署的坑

前端JS的包开发完成之后，需要在公司内网发布npm包，为了节省人工成本，需要配置自动化工作流：包括自动编译打包以及自动部署并内网发布。

这就涉及到了工程化中的CI/CD流知识点，需要在前端配置一个.gitlab-ci.yml文件，这时gitlab平台会自动执行这个文件并开启工作流。

我一开始自以为是的认为已经配置的完美无缺了，代码如下：

stages: # 分段
  - install
  - build
  - deploy

cache: # 缓存
  key:
    files:
      - yarn.lock
  paths:
    - node_modules/

install-job:
  stage: install
  script:
    - npm install --force
  only:
    - master

build-job:
  stage: build
  script:
    - npm run build
  only:
    - master

deploy-job:
  stage: deploy
  script:
    - npm publish
  only:
    - master

从安装、打包到发布一气呵成，毫不拖泥带水。

然后兴高采烈的把npm包安装上，一使用，好嘛，刚更新的代码竟然使用不了，然后我就去查node_modules里的包源代码，主要是dist和types两个文件夹的代码，纳尼？为什么新增的代码都没有被打包进npm包呢？

明明我认为我的yml已经很完美了，也没有发现有什么问题，但是问题确实不太好排查，又因为要的急，无奈之下，我只好手动build，然后把dist和types两个文件夹都从.ignore文件中释放出来，再重新发布，这下才能用了。

但是身为最强架构师的我，怎能容忍这般耻辱？我必须得排插到真凶！

说一下我的排查思路：手动打包发布就可以，但是自动打包发布就不行，说明问题出现在了自动这一步，矛头直指.gitlab-ci.yml配置文件。

但是配置文件执行的时候又没有报错，那是不是漏了什么东西呢？后来我就把我当前的配置文件以及我遇到的问题喂给了ChatGPT，如下：

我的.gitlab-ci.yml文件配置如下：

stages: # 分段
  - install
  - build
  - deploy
// ...

问题：当我通过流水线自动发布之后，我的dist文件没有更新成打包之后的产物

看看GPT的完美回答，直接解决了我的问题：

为了确保在 GitLab CI/CD 中缓存 node_modules 并且正确地生成和部署 dist 文件，你需要确认以下几点：

1. 缓存：确保 node_modules 被正确缓存。
2. 工件（Artifacts）：将 dist 文件夹添加为工件，在各阶段之间传递。
3. 依赖关系：确保 build-job 依赖于 install-job 的成果。

下面是修改后的 .gitlab-ci.yml 文件：

//...

install-job:
  // ...
  artifacts:
    paths:
      - node_modules/

build-job:
  //...
  dependencies:
    - install-job
  artifacts:
    paths:
      - dist/

deploy-job:
  //...
  dependencies:
    - build-job
  artifacts:
    paths:
      - dist/

解释关键改动

1. Artifacts in install-job:

   • 添加了 artifacts 部分，包含 node_modules/ 目录。这确保 node_modules 被保存并在后续阶段可用。

2. Dependencies in build-job:

   • 使用 dependencies 指定 build-job 依赖于 install-job 的 artifacts，确保 node_modules 在 build-job 中可用。
   • 添加 artifacts 部分，包含 dist/ 目录，这样在 deploy-job 中也可以访问到 dist/ 目录。

3. Dependencies in deploy-job:

   • 使用 dependencies 指定 deploy-job 依赖于 build-job 的 artifacts，确保 dist/ 在 deploy-job 中可用。
   • 也添加 artifacts 部分，包含 dist/ 目录，以防后续阶段需要访问。

确认缓存和工件路径

• node_modules/：用于缓存依赖项，加快构建速度。
• dist/：包含构建后的产物，需要在 deploy-job 中发布。

测试和验证

3. 检查工件：在 GitLab CI/CD 界面检查各阶段生成的工件，确保 dist/ 目录在 build-job 中生成并传递到 deploy-job。

这应该能够解决 dist 文件没有在部署阶段更新的问题。

总结

OK，GPT的解答已经完全点通了我，归根结底，我并没有把yml文件写完整，其中最重要的是我漏掉了artifacts这个参数配置，然后我又问了下GPT。

artifacts：指定构建过程中生成的文件或目录，以便在作业完成后被GitLab CI保存和传递给后续阶段或者作业。

由于每个job启动时, 都会自动删除.gitignore中指定的文件，而我的dist和types文件夹又恰好都在.gitignore中，因此，当走到最后一步deploy-job工作流的时候，gitlab CI中已经没有dist和types这俩文件目录了，所以理所当然的发布后的包中只有缓存的代码，而不会有更新后的代码了。

不得不感慨，AI真的在改变我们的生活呀！确实在提高生产效率方面正在发挥它强大的作用！

准备创建一个AI学习&副业社群（非免费），主要是分享我付费学到的一些AI资料，AI提示词、AI视频、AI绘画、AI数字人、智能体构建、AI写作、RPA自动化、AI开发相关、AI副业等，群内互相分享学习以及讨论AI相关的内容，一起追赶探索行业发展动态，如果有兴趣的可私信我：brown_7778