webpack项目迁移到vite遇到的一些问题

60岁咯
568 阅读2分钟

公司有个老项目，开发时热更很慢，开发体验不佳，所以决定使用vite去改造，对于原webpack项目改成vite可能会遇到相同的问题。

改造方法

  1. 安装最新的vite，当前版本4.0；
  2. 确定需要的插件。如果是vue 2项目，使用vite-plugin-vue2；如果是vue 3项目，使用@vitejs/plugin-vue；
  3. 创建vite.config.ts文件，配置对应插件，这个相对webpack简单得多。
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [createVuePlugin()],
})
  1. 接下来启动，可能会有问题，这就要针对一个一个问题来解决了。

路径别名

vue项目一般用@替代src，vite也可以配置对应别名。

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [createVuePlugin()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 别名配置
    },
  },
})

webpack配置之后CSS里面用的是~@，vite中不需要，需要把~去掉。

vite不支持require语法

vite不支持require语法，项目中有对应语法会报错，需要添加插件vite-plugin-require兼容。插件使用比较简单，不提供代码。

style-resources-loader 替代

webpack中可能会用到style-resources-loader把一些全局的样式、预处理器变量全局导入，可以使用vite对应CSS预处理选项替代。它会把additionalData配置的字符串添加到对应的文件开头，如果要把公共的导入则需要添加：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/common.scss";`,
      },
    },
  },
})

上面示例其实还有问题，import代码会加到它本身文件，这样就会出问题，所以需要排除这个文件。additionalData其实是可以写成函数的，它会传入2个参数，第一个是文件内容，第二个是文件绝对路径。所以可以改成添加了判断的函数：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData(content, name) {
          if (name !== resolve(__dirname, 'src/styles/common.scss')) {
            return '@import "@/styles/common.scss";' + content
          }
          return content
        },
      },
    },
  },
})

SCSS变量导入文件

你的项目也许使用了SCSS，也使用了如下语法：

// variables.scss
:export {
   color: #f00;
}

import variables from 'variables.scss';

const color = variables.color;

上面的语法在webpack中是没有问题的，在vite会报错，vite不会把variables.scss当成一个模块处理，需要把variables.scss文件名改成variables.module.scss。

导入node模块代码

webpack 4是可以把node的代码导入使用的，如path包里面的resolve，webpack 5移除了这个功能，vite也是不行的，如果使用vite，就考虑替代方案移除相关代码。因为不想影响太多代码，我采用的是把node代码打包出来，然后vite项目中导入。

可以写一个需要打包的内容，如需要resolve，可以这样：

const { resolve } = require('path');

export { resolve };

然后通过webpack使用lib模式打包，完成放到vite改造的项目。

avatar
文章
阅读
粉丝