常州网站建设公司巧誉友网络,网站开发开发小游戏吗,好的网站分析案例,wordpress虚拟资源主题前言
本文不介绍什么是webpack、什么是vite#xff0c;也不分析为什么要迁移。如果你想从webpack迁移到vite#xff0c;你可能会遇到一些坑#xff0c;这里我会尽量详细地介绍每一种可能遇到的坑以及解决办法。
老规矩#xff0c;先说AI的评价#xff1a;这篇从webpack迁…前言
本文不介绍什么是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}.vuereturn () {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来处理静态资源的方式。
总结
如果是新项目建议用vite来开发和构建如果是老项目建议用vite来开发还是用webpack来构建以保证稳定性。
