# 2023-04 vite
# 一、在 vite 项目引入 jquery
# 方法一，通过 script 全局引入
- 在 html 增加 script
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vite-vue3</title>
<script src="/public/jquery.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 配置 eslint 和 tsconfig，避免报错
// .eslintrc.cjs
module.exports = {
env: {
jquery: true,
},
}
1
2
3
4
5
2
3
4
5
先执行 npm i @types/jquery -D，再修改配置
// tsconfig.json
{
"compilerOptions": {
"types": ["jquery"]
}
}
1
2
3
4
5
2
3
4
5
- 在代码里直接使用
$
# 方法二、使用插件 @rollup/plugin-inject 注入 jquery
首先，安装 jquery、@rollup/plugin-inject
npm i jquery
npm i @rollup/plugin-inject -D
1
2
2
修改 vite.config.js 配置
import {defineConfig} from 'vite';
import inject from '@rollup/plugin-inject';
export default defineConfig({
plugins:[
inject({
$: 'jquery', // 会自动导入 node_modules 中的 jquery
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 参考
# 二、vite 项目第三方库依赖了全局 jquery
# 问题
由于第三方库使用了import $ from 'jquery'，而且打包的时候配置了 external，然后在打包后的 mjs 中，就会保留 import。项目里面如果想使用 script 全局引入的方式就会导致
无法 import jquery，因为找不到。
# 解决
一、先安装 rollup-plugin-external-globals，外部全局变量引入插件。eslint/ts 报错处理参考前面。
npm i rollup-plugin-external-globals -D
1
二、修改 vite.config.ts
import { defineConfig } from 'vite'
import externalGlobals from 'rollup-plugin-external-globals'
export default defineConfig({
build: {
rollupOptions: {
plugins: [
externalGlobals({
jquery: '$',
}),
],
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14