过去的一年，其实开发了不少东西，也接触了不少新玩意，更是踩了很多的坑，在终于闲下来的现在，尽量的总结一下（只能写一些能写的）
webpack转vite
这次编译工具的转换在最开始时可以说是被迫的，由于准备从vue2升级到vue3，然后发现官方已经改为了vite，并且命令行也进行了修改，只能跟着一起升级一下，当然，一开始用的时候还是很香的，不过当出现编译问题的时候，就不会这么想了
1.兼容性
这个应该属于目前只能妥协的一个解决方法，毕竟很多设备，尤其是手机，还在使用版本较低的chrome或其他内核，能支持es5就烧高香吧（再次回忆起被IE6支配的恐怖）。
我目前使用的方法是在vite.config.js中添加如下代码，可以基本解决因浏览器版本较低，产生的兼容性问题，不过代价就是编译时间长了一倍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
//其他引入
export default defineConfig({
//...其他配置信息
// 兼容低版本
build: {
target: ['ios11', 'es2015']
},
plugins: [
vue(),
// 兼容低版本
legacy({
targets: ['Chrome 52'],
modernPolyfills: true,
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
renderLegacyChunks: true,
polyfills: [
'es.symbol',
'es.array.filter',
'es.promise',
'es.promise.finally',
'es/map',
'es/set',
'es.array.for-each',
'es.object.define-properties',
'es.object.define-property',
'es.object.get-own-property-descriptor',
'es.object.get-own-property-descriptors',
'es.object.keys',
'es.object.to-string',
'web.dom-collections.for-each',
'esnext.global-this',
'esnext.string.match-all'
]
}),
],
})
|
还有一种极端情况，就是build之后，直接访问dist中的文件，这个使用vite打包是无法访问的，即使加入base: './'也不成，但是webpack却可以，所以在有需要直接访问的项目，还是要使用webpack进行打包，不过这种属于极端情况。vite已经可以适应绝大部分场景了。
旧包报错
使用了vite之后，有一些老版本的包就会报错，一般就是global这里，也是同样可以在配置文件中进行配置解决。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| import { defineConfig } from 'vite'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
//...
export default defineConfig({
//...
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true
})
]
}
}
})
|
然后我还遇到一个问题，就是在dev过程中，没有问题，但是build之后提示Buffer is undefined。有一种说法是在main.js中加入以下代码
1
2
3
4
5
| import * as buffer from "buffer";
if (typeof window.Buffer === 'undefined') {
window.Buffer = buffer.Buffer
}
|
但并没有解决我的问题，排查后发现，代码根本运行不到这里，就会报错。后来又查了一些网站，有一个做法是在index.html中加入以下代码，成功解决了问题。
1
2
3
4
| <script type="module">
import { Buffer } from "buffer";
window.Buffer = Buffer;
</script>
|