关于前端:前端脚手架-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.ts
plugins: [
  Components({
    resolvers: [AntDesignVueResolver(),
      ElementPlusResolver(),
      VantResolver(),]
  })
]
复制代码 

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

环境变量

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

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

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

别名配置

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

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

SVG 图标

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

相干依赖

• vite-plugin-svg-icons@1.0.4

配置文件

// vite.config.ts
plugins: [
  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>
复制代码