webpack迁移vite初体验

最近闲着无聊，想着与其浪费时间不如提升提升自己的技术栈，毕竟生命的意义在于折腾，况且作为一个21世纪的优秀程序员，应该有坚韧不拔之志，为中华之崛起而coding，拒绝躺平。 那搞点什么呢，想来想去不如就接触下vite吧，这个广为流传的神器最近真的是被捧上了天，之前项目中一直用的是vue-cli也就是基于webpack那套的构建工具，今天就来改造下让vite完美取代webpack的devserver。

一.准备工作

安装vite

npm i vite @vitejs/plugin-vue -S

安装之前请检查下您的vue版本都必须升级为3.2.25以上，否则等待你的就是一堆报错

二.新建配置文件

根目录下创建vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
    plugins: [vue()],
});

然后在package.json中把之前的开发命令改成

"scripts": {
    dev:"vite --open"
}

然后我们在终端运行npm run dev 即可

三.排错

1.文件别名

启动时会报这个错，意思是文件没有引入，为什么因为路径没有被识别，这个时候只需要配置个别名即可，回到vite.config.ts增加几行代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '~@': path.resolve(__dirname, 'src'),
        }
    },
});

2.无法识别jsx或者tsx

项目中有时候会写jsx或者tsx，这个时候需要安装插件来帮我们处理

npm install @vitejs/plugin-vue-jsx -D

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
const path = require('path');
export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '~@': path.resolve(__dirname, 'src'),
        }
    },
});

3.无法识别process

之前我们在vue-cli中区分生产还是开发，我们通常都会使用process.env获取环境变量，但在vite中它只在一个特殊的 import.meta.env 对象上暴露环境对象，所以我们只能替换为

import.meta.env.DEV // 开发
import.meta.env.PROD // 生产

但是这样替换之后，如果我们打包还想使用webpack，就不可行了，那如何兼容这两种情况呢，只在开发使用vite的环境变量，打包还是使用之前的process呢？看了下vite文档有个define的属性，我们只要将在开发环境下的不被识别的process.env变成可识别的一个固定属性不就行了。

define: {
     'process.env': {
          NODE_ENV: 'development'
     }
}

这样就可自动识别process.env且处于开发模式，因为我们生产打包走的是webpack，所以可以将值直接写死。

4.less全局变量

之前vue-cli中配置less变量很简单，引入变量文件即可，vite中也大同小异

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
const lessOption = require('./src/config/global.less');
const path = require('path');
export default defineConfig({
    plugins: [vue(), vueJsx()],
    define: {
        'process.env': {
            NODE_ENV: 'development'
        }
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '~@': path.resolve(__dirname, 'src'),
        }
    },
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    ...lessOption.modifyVars // 就是类似'primary-color':'#0176d3'的json
                },
                javascriptEnabled: true,
            },
        },
    },
});

四.文档

vite中文文档

好了到这我的工程就算改造完了，黄天不负有心人总算折腾出成果了，后续的坑应该还有不少，继续填坑吧，虽然就搞了几个小时但是的确收获满满，继续加油吧，坚持不懈做好每一件小事。下期打算出一期webpack和vite的打包原理，感觉构建工具也可以学到好多，好了不多说了，我去探索我的新大陆了。