乐趣区

关于前端:前端脚手架-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:不必再懊恼需不需要开 activefocusdisabled 等。
  • 任意值 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>
复制代码 
退出移动版