vue3.0+ts+vite的项目安装three.js的项目发布遇到的坑

项目场景：

项目场景：vue3.0+ts+vite的项目想安装three.js的项目，通过jenkins发布版本，遇到的一些问题

---

问题描述

首先报错。说我的 gsap没有引入

[bug] [vite]: Rollup failed to resolve import "gsap" from “src/api/request.js“....类似的

将vue中vite的配置文件中添加

 build:{
    rollupOptions:{
      external:['axios']
    }
  }

但是发现加的越来越多，包括’three’。。。我笑了

rollupOptions: {
        external: [
          'gsap',
          'three',
          'gui',
          'scene',
          'cameraModule',
          'axesHelper',
          'renderer',
          'createMesh',
          'animate',
          'eventHub',
          'City',
          'RGBELoader',
        ],
      },

再就是报

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

这句话的引入报错，改为

import { DRACOLoader } from 'three';

是好了，不报错了。

但是F12的页面console报错，three.js的项目不出来

The requested module '/node_modules/.vite/deps/three.js?v=d09bc277' does not

我感觉不是这的原因，应该是jenkins的的node_modules文件没有更新的原因，在修改jenkins的build的文件

 stage('build') { //
          steps {
            sh '''rm -rf node_modules'''
            sh '''npm cache clean --force'''
            sh '''npm install esbuild@0.11.3 --ignore-scripts'''
            sh '''npm install --registry=https://registry.npm.taobao.org --unsafe-perm'''
            sh '''yarn build'''
          }
        }

加npm install esbuild@0.11.3 --ignore-scripts的原因是因为我没加试了一次，报错，让我安装，😓

再试，又报错

Make sure you don't have "ignore-scripts" set to true. You can check this with
"npm config get ignore-scripts". If that returns true you can reset it back to
false using "npm config set ignore-scripts false" and then reinstall esbuild.

好吧，在修改jinkens的命令

stage('build') { //
          steps {
            sh '''npm config get ignore-scripts'''
            sh '''npm config set ignore-scripts false'''
            sh '''node node_modules/esbuild/install.js'''
            sh '''yarn build'''
          }
        }

终于成功了，天啊，废了我2个多小时

原因分析：

下次在安装three.js项目和vue3.0的项目时，一定要记得先npm i ,要不然所以的报错都是错的。

---