关于前端:前端脚手架-webpack-迁移-Vite2-踩坑实践

我的项目背景

首先介绍一下我的集体开源我的项目 X-BUILD ，是一款前端脚手架，从2017年2月至今已有4年多的工夫，目前我正在针对 vue3 做一套全新的版本，全面应用 Vite 作为构建工具，在这个过程中遇到的一些坑和劣势分享给大家。

另外如果对我的脚手架有趣味尝试，能够参考阐明文档。

Vite 迁徙指南

刚刚开始开发 v6.0 版本时，对 Vite 不是很理解，所以仍然采纳了 Vue-CLI 4.5 进行模板的根本搭建。后续开发过程中，逐渐对 Vite 产生了更多的理解，有很多新的个性很不错，所以从 v6.1 开始，全面迁徙至 Vite2 作为模板的构建工具。

ESLint

Vite 目前还没有提供灵便的配置选项，默认创立的我的项目并不反对主动配置好的 ESLint 性能，所以须要手动配置，这块也是我破费迁徙工夫最多的一块。在 awesome-vite 中发现了一个配置 ESLint 的插件 - vite-eslint，但我不晓得要应用的 Airbnb 计划如何配置，所以这一块我还是采纳了手动配置的形式。

ESLint 相干依赖

eslint@7.32.0
eslint-config-airbnb-base@14.2.1 （Airbnb 根底规定的 ESLint 插件）
eslint-plugin-import@2.24.2
eslint-plugin-vue"@7.17.0

Prettier 相干依赖

prettier@2.3.2
eslint-config-prettier@8.3.0
eslint-plugin-prettier@4.0.0

ESLint 规定和 Prettier 规定存在抵触的状况，eslint-config-prettier 这个插件就是禁用所有格局相干的 ESLint 规定，也就是说格局规定这块由 Prettier 来解决。

配置文件

.eslintrc.js

module.exports = {  env: {    browser: true,    es2021: true,    node: true,  },  extends: ['plugin:vue/vue3-essential', 'airbnb-base', 'plugin:prettier/recommended'],  parserOptions: {    ecmaVersion: 12,    parser: '@typescript-eslint/parser',    sourceType: 'module',  },  plugins: ['vue', '@typescript-eslint'],  rules: {    'import/no-unresolved': 'off',    'import/extensions': 'off',    'import/no-absolute-path': 'off',    'import/no-extraneous-dependencies': 'off',    'vue/no-multiple-template-root': 'off',    'no-param-reassign': [      'error',      {        props: true,        ignorePropertyModificationsFor: ['state', 'config'],      },    ],  },  settings: {},};复制代码

.prettierrc

{  "useTabs": false,  "tabWidth": 2,  "printWidth": 88,  "singleQuote": true,  "trailingComma": "all",  "bracketSpacing": true,  "semi": true}复制代码

至此，ESLint 就能够失常应用了，如果有特殊要求能够在配置文件中手动减少 Rules。

Stylelint

尽管我曾经打算全面拥抱 Tailwind.css，但不免个别情况咱们要独自应用 CSS 来实现，那么一个规范的编码格调校验就显得尤为重要。

相干依赖

stylelint@13.13.1
stylelint-config-standard@22.0.0 （Stylelint 的举荐配置）
stylelint-config-prettier@8.0.2
stylelint-config-recess-order@2.5.0 （属性排序）

Stylelint 与 ESLint 相似，都与 Prettier 规定有抵触，stylelint-config-prettier 能够解决这些抵触。

配置文件

module.exports = {  extends: [    'stylelint-config-standard',     'stylelint-config-prettier',     'stylelint-config-recess-order',  ],  plugins: ['stylelint-scss'],  rules: {        // ...  },};复制代码

如果你应用 Sass/Scss 须要装置插件 stylelint-scss。

Tailwind.css

Tailwind 当初的评估褒贬不一，我集体尝试之后感觉不错，在团队内也进行了推广，目前曾经成为团队技术栈的一部分。目前在我的项目中应用的是 Postcss 兼容性形式，只管应用的 v2.2 版本，也无奈应用 JIT 模式，这是因为目前应用 @vue/cli 4.5 之前的版本应用的是 Postcss 7，想要降级比拟麻烦，或者期待@vue/cli 5.0 版本（目前是测试版）。但 vite2 凑巧曾经应用了 Postcss 8，问题迎刃而解。

JIT 模式

Tailwind CSS 2.0 正式上线的 Just-in-Time （简称 JIT）编译器，能够在写 HTML 时及时编译 CSS，大幅缩短编译工夫，以及放大产生的文件大小，它具备以下特点：

超疾速的编译工夫：本来Tailwind CLI编译须要3-8秒，在 JIT模式 下仅需 0.8秒 。
间接应用任意Variants：不必再懊恼需不需要开 active 、 focus 或 disabled 等。
任意值CSS class：能够间接在HTML里写像 h-[13px] 这样的class，将会主动生成。
在开发和生产环境编译出一样的CSS：不须要懊恼上线后会不会有 class 灵异的隐没。

相干依赖

vitawind@1.2.8

Vitawind 是一个在 Vite 上能够用几步就能够装置和配置好的 Tailwind CSS 的工具。

配置文件

你能够依照官网的形式疾速的进行配置，或者通过手动的形式配置：

创立 src/styles/tailwind.css 文件

@tailwind base;@tailwind components;@tailwind utilities;复制代码

在 main.ts 中引入：

import '@/styles/tailwind.css';复制代码

在根目录创立 tailwind.config.js：

module.exports = {  mode: 'jit',  purge: ['index.html','./src/**/*.{js,jsx,ts,tsx,vue,html}'],  darkMode: false, // or 'media' or 'class'  theme: {    extend: {},  },  plugins: [],}复制代码

至此，Tailwind 曾经能够在我的项目中失常应用。

JIT 模式太香了，倡议大家真正的尝试一段时间再对 Tailwind 做主观的评估。

组件库的主动导入

你是否还是依照上面这个步骤加载某些组件库中的组件？

通过 import { *** } from '***' 加载某些组件。
通过 Vue.use(***) 去加载组件。
引入组件库款式文件。
如果你做按需加载，还须要应用 babel 插件反对。

如果是这样，那么我倡议你替换成另一种更便捷的形式 unplugin-vue-components。

特点

开箱即用地反对 Vue 2 和 Vue 3。
反对 Vite、Webpack、Vue CLI、Rollup。
Tree-shakable，只注册你应用的组件。
文件夹名称作为命名空间。
残缺的 TypeScript 反对。
风行的 UI 库的内置解析器。

组件库反对

反对了市面上常见的组件库：

Ant Design Vue
Element Plus
Element UI
Headless UI
IDux
Naive UI
Prime Vue
Vant
VEUI
Varlet UI
View UI
Vuetify
VueUse Components

相干依赖

unplugin-vue-components@0.14.9

配置文件

import Components from 'unplugin-vue-components/vite';import ViteComponents, {  AntDesignVueResolver,  ElementPlusResolver,  VantResolver,} from 'unplugin-vue-components/resolvers'// vite.config.tsplugins: [  Components({    resolvers: [      AntDesignVueResolver(),      ElementPlusResolver(),      VantResolver(),    ]  })]复制代码

不须要手动引入组件的形式是不是很香？

环境变量

在开发过程中，通常分为三步，development（开发）、staging（预生产测试）、production（生产），在不同的环境下应用不同的变量和打包形式，这一点 Vite 也是反对的，不过与 Webpack 有一些出入：

process.env.VUE_APP_BASE_URL // webpackimport.meta.env.BASE_URL // vite复制代码

Webpack 与 Vite 环境变量获取的形式不同。
.env 文件的应用形式是统一的。
vite 反对 TypeScript 智能提醒，这须要你在 env.d.ts 中配置。

别名配置

Vite 创立的我的项目并不能间接应用别名，例如 @ 操作符代表 src，能够通过上面的配置实现：

// vite.config.tsresolve: {  alias: {    '@': resolve(__dirname, './src'),  },},复制代码

SVG 图标

图标始终应用的是 svg 计划，通过 svg-sprite-loader 来加载我的项目中的 svg 文件，但这个 loader vite 是无奈应用的，所以咱们采纳另一个计划：

相干依赖

vite-plugin-svg-icons@1.0.4

配置文件

// vite.config.tsplugins: [  viteSvgIcons({    iconDirs: [resolve(process.cwd(), 'src/assets/icons')],    symbolId: 'icon-[dir]-[name]',  }),]复制代码

在 main.ts 中引入

import 'virtual:svg-icons-register';复制代码

组件

手写一个全局组件，不便调用，反对文件夹、色彩配置。

<script setup lang="ts">import { computed, withDefaults, defineProps } from 'vue';interface Props {  prefix?: string;  name?: string;  color?: string;}const props = withDefaults(defineProps<Props>(), {  prefix: 'icon',  name: '',  color: '#000',});const symbolId = computed(() => `#${props.prefix}-${props.name}`);</script><template>  <svg aria-hidden="true">    <use :xlink:href="symbolId" :fill="color" />  </svg></template>复制代码