前端腳手架 webpack 遷移 Vite2 踩坑實踐

項目背景

首先介紹一下我的個人開源項目 X-BUILD ，是一款前端腳手架，從2017年2月至今已有4年多的時間，目前我正在針對 vue3 做一套全新的版本，全面使用 Vite 作為構(gòu)建工具，在這個過程中遇到的一些坑和優(yōu)勢分享給大家。

另外如果對我的腳手架有興趣嘗試，可以參考說明文檔。

Vite 遷移指南

剛剛開始開發(fā) v6.0 版本時，對 Vite 不是很了解，所以依然采用了 Vue-CLI 4.5 進(jìn)行模板的基本搭建。后續(xù)開發(fā)過程中，逐步對 Vite 產(chǎn)生了更多的了解，有很多新的特性很不錯，所以從 v6.1 開始，全面遷移至 Vite2 作為模板的構(gòu)建工具。

ESLint

Vite 目前還沒有提供靈活的配置選項，默認(rèn)創(chuàng)建的項目并不支持自動配置好的 ESLint 功能，所以需要手動配置，這塊也是我花費遷移時間最多的一塊。在 awesome-vite 中發(fā)現(xiàn)了一個配置 ESLint 的插件 - vite-eslint，但我不知道要使用的 Airbnb 方案如何配置，所以這一塊我還是采用了手動配置的方式。

ESLint 相關(guān)依賴

Prettier 相關(guān)依賴

ESLint 規(guī)則和 Prettier 規(guī)則存在沖突的情況，eslint-config-prettier 這個插件就是禁用所有格式相關(guān)的 ESLint 規(guī)則，也就是說格式規(guī)則這塊由 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: {},
};


復(fù)制代碼

.prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 88,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true
}
復(fù)制代碼

至此，ESLint 就可以正常使用了，如果有特殊要求可以在配置文件中手動增加 Rules。

Stylelint

雖然我已經(jīng)打算全面擁抱 Tailwind.css，但難免個別情況我們要單獨使用 CSS 來實現(xiàn)，那么一個標(biāo)準(zhǔn)的編碼風(fēng)格校驗就顯得尤為重要。

相關(guān)依賴

Stylelint 與 ESLint 類似，都與 Prettier 規(guī)則有沖突，stylelint-config-prettier 可以解決這些沖突。

配置文件

module.exports = {
  extends: [
    'stylelint-config-standard', 
    'stylelint-config-prettier', 
    'stylelint-config-recess-order',
  ],
  plugins: ['stylelint-scss'],
  rules: {
		// ...
  },
};
復(fù)制代碼

如果你使用 Sass/Scss 需要安裝插件 stylelint-scss。

Tailwind.css

Tailwind 現(xiàn)在的評價褒貶不一，我個人嘗試之后覺得不錯，在團隊內(nèi)也進(jìn)行了推廣，目前已經(jīng)成為團隊技術(shù)棧的一部分。目前在項目中使用的是 Postcss 兼容性方式，盡管使用的 v2.2 版本，也無法使用 JIT 模式，這是由于目前使用 @vue/cli 4.5 之前的版本使用的是 Postcss 7，想要升級比較麻煩，或者等待@vue/cli 5.0 版本（目前是測試版）。但 vite2 恰巧已經(jīng)使用了 Postcss 8，問題迎刃而解。

JIT 模式

Tailwind CSS 2.0 正式上線的 Just-in-Time （簡稱 JIT）編譯器，可以在寫 HTML 時及時編譯 CSS，大幅縮短編譯時間，以及縮小產(chǎn)生的文件大小，它具備以下特點：

  • 超快速的編譯時間：原本Tailwind CLI編譯需要3-8秒，在 JIT模式 下僅需 0.8秒 。
  • 直接使用任意Variants：不用再煩惱需不需要開 active 、 focus 或 disabled 等。
  • 任意值CSS class：可以直接在HTML里寫像 h-[13px] 這樣的class，將會自動生成。
  • 在開發(fā)和生產(chǎn)環(huán)境編譯出一樣的CSS：不需要煩惱上線后會不會有 class 靈異的消失。

相關(guān)依賴

Vitawind 是一個在 Vite 上可以用幾步就可以安裝和配置好的 Tailwind CSS 的工具。

配置文件

你可以按照官網(wǎng)的方式快速的進(jìn)行配置，或者通過手動的方式配置：

創(chuàng)建 src/styles/tailwind.css 文件

@tailwind base;
@tailwind components;
@tailwind utilities;
復(fù)制代碼

在 main.ts 中引入：

import '@/styles/tailwind.css';
復(fù)制代碼

在根目錄創(chuàng)建 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: [],
}
復(fù)制代碼

至此，Tailwind 已經(jīng)可以在項目中正常使用。

JIT 模式太香了，建議大家真正的嘗試一段時間再對 Tailwind 做客觀的評價。

組件庫的自動導(dǎo)入

你是否還是按照下面這個步驟加載某些組件庫中的組件？

  • 通過 import { *** } from '***' 加載某些組件。
  • 通過 Vue.use(***) 去加載組件。
  • 引入組件庫樣式文件。
  • 如果你做按需加載，還需要使用 babel 插件支持。

如果是這樣，那么我建議你替換成另一種更便捷的方式 unplugin-vue-components。

特點

  • 開箱即用地支持 Vue 2 和 Vue 3。
  • 支持 Vite、Webpack、Vue CLI、Rollup。
  • Tree-shakable，只注冊你使用的組件。
  • 文件夾名稱作為命名空間。
  • 完整的 TypeScript 支持。
  • 流行的 UI 庫的內(nèi)置解析器。

組件庫支持

支持了市面上常見的組件庫：

相關(guān)依賴

配置文件

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(),
    ]
  })
]
復(fù)制代碼

不需要手動引入組件的方式是不是很香？

環(huán)境變量

在開發(fā)過程中，通常分為三步，development（開發(fā)）、staging（預(yù)生產(chǎn)測試）、production（生產(chǎn)），在不同的環(huán)境下使用不同的變量和打包方式，這一點 Vite 也是支持的，不過與 Webpack 有一些出入：

process.env.VUE_APP_BASE_URL // webpack
import.meta.env.BASE_URL // vite
復(fù)制代碼
  • Webpack 與 Vite 環(huán)境變量獲取的方式不同。
  • .env 文件的使用方式是一致的。
  • vite 支持 TypeScript 智能提示，這需要你在 env.d.ts 中配置。

別名配置

Vite 創(chuàng)建的項目并不能直接使用別名，例如 @ 操作符代表 src，可以通過下面的配置實現(xiàn)：

// vite.config.ts
resolve: {
  alias: {
    '@': resolve(__dirname, './src'),
  },
},
復(fù)制代碼

SVG 圖標(biāo)

圖標(biāo)一直使用的是 svg 方案，通過 svg-sprite-loader 來加載項目中的 svg 文件，但這個 loader vite 是無法使用的，所以我們采用另一個方案：

相關(guān)依賴

配置文件

// vite.config.ts
plugins: [
  viteSvgIcons({
    iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]',
  }),
]
復(fù)制代碼

在 main.ts 中引入

import 'virtual:svg-icons-register';
復(fù)制代碼

組件

手寫一個全局組件，方便調(diào)用，支持文件夾、顏色配置。

<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>
復(fù)制代碼

本文使用 文章同步助手 同步

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容