前言
本文不介绍什么是webpack、什么是vite,也不分析为什么要迁移。如果你想从webpack迁移到vite,你可能会遇到一些坑,这里我会尽量详细地介绍每一种可能遇到的坑以及解决办法。
老规矩,先说AI的评价:这篇从webpack迁移到vite的采坑指南文章内容全面、详细,主要介绍了在迁移过程中可能遇到的环境变量、路径引入、别名、非ESM包、babel插件等方面的区别和对应处理方法,具有很强的参考价值,是一篇非常优质的技术迁移指南类文章,内容结构完整,准确可靠,可以提供很好的参考价值。我对这篇文章内容和质量表示认可。
1、环境变量
Webpack 通过 DefinePlugin 可以在代码编译时注入环境变量。Vite 需要通过 import.meta 配置来实现。
像 process.env.FOO 这样在 webpack 中可以正常注入并使用的环境变量,在 Vite 构建出的包中会是 undefined。
想在不改变老的业务代码的情况下,实现无侵入的适配vite,就需要通过vite的define配置,这里举个例子:
define: {
// 强烈建议增加一个唯一标识,如果是基于vite开发,基于webpack构建的业务,可以以此来区分做一下适配逻辑
'process.env.IS_VITE': 'true',
// 给window上挂上对应的值,还在的在index.html中通过顶部script挂载
'process.env.VUE_APP_CONFIG_SALT': JSON.stringify(
env.VUE_APP_CONFIG_SALT
),
'process.env.VUE_APP_CONFIG_ITER': JSON.stringify(
env.VUE_APP_CONFIG_ITER
),
'process.env.VUE_APP_CONFIG_IV': JSON.stringify(env.VUE_APP_CONFIG_IV),
'process.env.VUE_APP_CONFIG_ROOTKEY': JSON.stringify(
env.VUE_APP_CONFIG_ROOTKEY
),
'process.env.BASE_URL': JSON.stringify(env.BASE_URL),
'process.env.VUE_APP_DEPLOY_ENV': JSON.stringify(env.VUE_APP_DEPLOY_ENV),
'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV),
'process.env.ENV': JSON.stringify(env.ENV),
'process.browser': 'true',
// 开发时解决buffer里的global,打包build时回到node环境
...(env.NODE_ENV === 'production'
? {}
: {
global: 'window'
})
},
基本上window上没有的值,都可以通过此次来挂载,或者在vite的入口index.html中去挂载。
2、路径引入
如果有一个文件是/components/about/index.vue
,那么用webpack时,直接写import from '/components/about'
即可,但是在vite中,需要写明完整路径。
如果是需要用vite来dev和build,那我建议你直接将对应的业务代码都逐一修改,虽然vite可以通过配置后缀名来解决对.vue的缩写,但是对/index.vue这种缩写是不行的。
如果只是通过vite来dev,还是通过webpack来构建,我也建议将对应的业务代码都逐一修改。
除非是遇到依赖路径是从后端数据库而来的,比如说动态菜单这种。无法有效更加数据库的,这里提供一种侵入性较小的解决方案,就是在入口文件自己定义一个全局的方法:
window.viteRequire = function(url) {
// 把一些省略了index的补充上
const needIndexList = [
...
]
needIndexList.forEach(item => {
if(url == item) {
url = `${item}/index`
}
})
let url2 = url.includes('.vue') ? `./src/views/${url}` : `./src/views/${url}.vue`
return () => {
return import(url2)
// return import(url2).catch(() => {
// return import(url2.replace('.vue', '/index.vue'))
// })
}
}
然后通过Vite的标识,在dev时用这个方法来引入模块,并适配对/index.vue的尝试拼接。
3、别名
webpack有一些隐式的别名比如~,这些在vite里可能需要单独显式的声明出来:
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'~@': path.resolve(__dirname, 'src')
}
},
4、非ESM包的处理
一些第三方库可能需要特殊处理才能与 Vite 正常工作。因为Vite只支持ESM,所以如果引用的包是commonjs的,Vite会自动去做一些转换,如果转换有问题的,请自行配置include或者exclude:
optimizeDeps: {
// 兼容esm和commonjs的default问题
include: [
'dayjs',
'spark-md5',
'file-saver',
'photoclip2',
'vue-infinite-loading'
],
exclude: []
},
5、babel-plugin-import
如果遇到某些场景,需要做一些import路径的定制化改写,在webpack里一般会用babel-plugin-import,在vite里有对标的插件:
plugins: [
vue(),
eslint(),
// 用来处理兼容性
legacy({
targets: ['defaults', 'not IE 11']
}),
// 兼容babel里的import-plugin,引入组件库使用
usePluginImport({
libraryName: '@ccpow/devopslib',
customName: (name, file) => {
return `@ccpow/devopslib/packages/components/${capitalize(
name
)}/index.vue`
}
})
],
usePluginImport实现逻辑如下:
const babelImport = require('babel-plugin-import');
const babel = require('@babel/core');
const importMeta = require('@babel/plugin-syntax-import-meta');
function usePluginImport(options) {
return {
name: 'vite-plugin-importer',
transform(code, id) {
if (/\.(?:[jt]sx?|vue)$/.test(id) && !/node_modules\/vite/.test(id)) {
const plugins = [importMeta, [babelImport, options]]
const result = babel.transformSync(code, {
ast: true,
plugins,
sourceFileName: id,
configFile: false
})
return {
code: result.code,
map: result.map
}
}
},
};
};
export default usePluginImport
6、eslint
在webpack时,默认都是eslint-loader来完成eslint的检测,并在开发时就会提示出来,但是在vite中使用eslint时,默认在开发时不会去校验,所以需要用到插件vite-plugin-eslint
。
7、对require的hack
如果是基于vite开发,基于webpack来构建,又不想侵入代码里通过require来引入图片的逻辑。可以在全局index.html的入口对require方法进行复写:
window.require = function(url) {
if(url.includes('@/')) {
return new URL(url.replace('@/', '/src/'), import.meta.url).href
}
if(url.includes('@img/')) {
return new URL(url.replace('@img/', '/src/assets/images/'), import.meta.url).href
}
}
这样才是vite来处理静态资源的方式。文章来源:https://www.toymoban.com/news/detail-673783.html
总结
如果是新项目,建议用vite来开发和构建;如果是老项目,建议用vite来开发,还是用webpack来构建,以保证稳定性。文章来源地址https://www.toymoban.com/news/detail-673783.html
到了这里,关于Webpack迁移Vite采坑指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!