在vite中使用三方插件jquery/jqueryui/bootstrap/gojs等等

在项目中将vue2升级到了vue3版本，但是业务核心代码已完善，为了兼容已开发功能，引用了些老版本插件，以此记录

下载

yarn add jquery jquery-ui-dist bootstrap

-此处jquery-ui下载jquery-ui-dist版本

main.ts

// 引入插件
// import $ from 'jquery';   // 此处引用非全局变量  需vite.config.ts中配置全局引用
// import go from 'gojs';  // 按需引用 simulation.js
import 'bootstrap' // vite.config.ts中设置引用路径
import 'bootstrap/dist/css/bootstrap.min.css'
// import "@popperjs/core";  // bootstrap定位文件 - 非必要
// import * as d3 from 'd3'; // 按需引用
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 使用jquery-ui   css必须引用
import 'jquery-ui-dist/jquery-ui';
import 'jquery-ui-dist/jquery-ui.css';

vite.config.js

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import inject from '@rollup/plugin-inject';  // 必须重要！效果和webpack.ProvidePlugin中相同


// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    inject({
    
     
      $: "jquery",  // 这里会自动载入 node_modules 中的 jquery   jquery全局变量
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],
  resolve:{
    
    
    //设置路径别名
    alias: {
    
    
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve(''),
      },
  }
})

三方插件静态类型声明文件下载

yarn add @types/jquery @types/bootstrap

• 静态类型文件，就是声明文件 *.d.ts
• 有些包直接下载时包含，jquery这些老的插件需要单独下载
• 并不是所有文件都有声明文件 像jquery-ui就没有

参考文档

在vite中使用bootstrap - Bootstrap & Vite

注入全局变量插件@rollup/plugin-inject - @rollup/plugin-inject