Use three-party plug-ins jquery/jqueryui/bootstrap/gojs, etc. in vite

In the project, vue2 was upgraded to vue3 version, but the core code of the business has been improved. In order to be compatible with the developed functions, some old version plug-ins are referenced to record

download

yarn add jquery jquery-ui-dist bootstrap

-Here jquery-ui download jquery-ui-dist version

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(''),
      },
  }
})

Three-party plug-in static type declaration file download

yarn add @types/jquery @types/bootstrap

• Static type files are declaration files *.d.ts
• Some packages are included when downloading directly, and old plugins such as jquery need to be downloaded separately
• Not all files have declaration files like jquery-ui does not

reference documents

Using bootstrap in vite - Bootstrap & Vite

Inject Global Variables Plugin @rollup/plugin-inject - @rollup/plugin-inject