Webpack迁移Vite采坑指南

这篇具有很好参考价值的文章主要介绍了Webpack迁移Vite采坑指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

本文不介绍什么是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来处理静态资源的方式。

总结

如果是新项目,建议用vite来开发和构建;如果是老项目,建议用vite来开发,还是用webpack来构建,以保证稳定性。文章来源地址https://www.toymoban.com/news/detail-673783.html

到了这里,关于Webpack迁移Vite采坑指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端构建工具对比 webpack、vite、esbuild等

    人类和动物最大的区别是会使用工具,工具的作用就是提升我们的生产效率,同样,随着前端工程化的演进,伴随着一些优秀的工程化的生产效率工具,今天就来聊一聊,前端工程中的构建工具。 前端构建工具按照功能可以分为如下两大类: 转译 - 将高级语法转换为低级的

    2024年01月19日
    浏览(30)
  • Node.js与Webpack笔记(二)

    上一篇:Node.js与Webpack笔记(一)-CSDN博客 1.Webpack简介以及体验 webpack是一个静态模块打包工具,从入口构建依赖图,打包有关的模块,最后用于展示你的内容 静态模块:编写代码过程中,html,css,js,图片等固定内容的文件 打包过程,注意:只有和入口有直接/间接引入关系

    2024年03月10日
    浏览(82)
  • 第三节:Node.js 之 Webpack 打包

    官网网址:https://webpack.docschina.org/ 减少文件数量,缩减代码体积,提高浏览器打开速度。 用于分析、并打包代码。支持所有类型文件的打包,其本质是一个第三方模块包。 初始化包环境 安装依赖包 配置package.json 的 scripts(自定义命令) 在根目录下新建 src 文件夹, 所有要

    2024年02月15日
    浏览(52)
  • 【前端笔记】前端包管理工具和构建打包工具介绍之npm、yarn、webpack、vite

    NPM(Node Package Manager)是node包管理器,是node.js默认采用的软件包管理系统,使用JavaScript语言编写。包管理可以理解为依赖管理,有一个npm包管理仓库,当我们执行npm命令的时候,就可以直接从npm仓库中下载对应的依赖包,类似于后端开发中的POM。 node.js中就已经安装了NPM,所

    2024年02月02日
    浏览(40)
  • Node.js入门与 Webpack模块打包工具

    目录 Node.js入门 fs模块-读写文件 path模块-路径处理  压缩前端html 认识URL中的端口号 http模块-创建Web服务 体验 Web 服务除了接口数据以外,还能返回网页资源等  Node.js模块化  ECMAScript标准-默认导出和导入 ECMAScript标准-命名导出和导入  包的概念 npm软件包管理器 npm安装所有依

    2024年02月11日
    浏览(44)
  • Node.JS学习 | Babel | webpack | ES6

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Node.JS能够在服务器端运行JavaScript的开放源代码、跨平台运行环境;Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞IO和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模 let有效避免var的变

    2024年02月07日
    浏览(41)
  • node.js下载安装和报错大全(express、淘宝镜像、webpack、Vue)

    目录 一、概述 二、操作步骤 (一)下载node.js (二) 安装node.js (三)查看环境变量 (四)查看版本信息 (五)新建全局下载包和缓存包位置 (六)配置环境变量 (七)安装express(内嵌http模块) 安装成功 安装失败 解决办法一(最好的办法)  解决办法二(其次) (八

    2024年02月01日
    浏览(75)
  • node.js的下载安装详细步骤(还有安装配套的express、淘宝镜像、webpack、Vue)

    目录 一、概述 二、操作步骤 (一)下载node.js (二) 安装node.js (三)查看环境变量 (四)查看版本信息 (五)新建全局下载包和缓存包位置 (六)配置环境变量 (七)安装express(内嵌http模块) 安装成功 安装失败 解决办法一(最好的办法)  解决办法二(其次) (八

    2024年02月09日
    浏览(72)
  • 【前端面试3+1】12 toktn验证过程、面向对象特性、webpack和vite的区别、【字符串中的第一个唯一字符】

    用户登录:用户提供用户名和密码进行登录。 服务器验证:服务器接收到用户提供的用户名和密码,进行验证。 生成token:如果用户名和密码验证通过,服务器会生成一个token,通常包含一些加密的信息,如用户ID、过期时间等。 返回token:服务器将生成的token返回给客户端(

    2024年04月18日
    浏览(76)
  • vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

    报错信息: 原因: 当出现编译错误或警告时,在浏览器中显示全屏覆盖。 解决方法: 在vue.config.js中添加如下配置, 重启项目 即可 https://webpack.docschina.org/configuration/dev-server/#overlay

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包