什么是构建工具

浏览器只认识 .html，.css，.js，这就意味着当项目中使用了其他类型文件时（比如：.ts，.vue 等）需要将其转换成浏览器能识别的文件才能正常运行项目，例如以下这些场景:

  • .ts需要安装tsc工具转换.ts->.js
  • .vue需要安装vue-loader和vue-template-compiler转换成js
  • .less | .scss | sass需要安装less-loader,scss-loader等一系列的loader编译，最后才能在浏览器展示出来
  • es新特性在部分低级浏览器识别不了则需要安装babel相关插件进行语法降级

构建工具不需要我们去手动一步一步处理这些编译过程，它会集成这些编译处理工具并完成这些流程，让开发人员只需要关注业务代码，代码经过构建工具处理后，就能直接显示在浏览器中

webpack

根据官网的描述
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

使用上的差异

  1. 引入静态资源需要使用require或者es6规范的import来加载 示例：
    1
    2
    3
    4
    //esm
    import img from '../img.png'
    //common
    const img = require('../img.png')
  2. 动态导入读取文件使用require.content来一次性导出多个文件 示例:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const files = require.context('./modules', false, /\.ts$/)
    files.keys().forEach(key => {
      if (files(key).default !== undefined && files(key).default instanceof Array) {
        files(key).default.forEach((item: RouteRecordRaw) => {
          routes.push(item)
        })
      } else {
        routes.push(files(key).default)
      }
    })
  3. 环境变量的引用
    1
    2
    //vue-cli中环境变量需以VUE_APP开头
    const { VUE_APP_XX } = process.env

vite

根据官网的描述
下一代的前端工具链

  • 使用原生 esm 文件，无需打包
  • 轻量快速的热重载
  • 对 typescript、jsx、css 等支持开箱即用

使用上的差异

  1. 引入静态资源使用import或者new URL来加载 示例：

    1
    2
    import img from '../img.png'
    const img = new URL('../img.png', import.meta.url).href //不支持快捷路径@ 只能相对路径

  2. 动态导入读取文件使用import.meta.globEager 示例:

    1
    2
    3
    4
    5
    6
    const files = import.meta.globEager('./modules/*.ts')
    Object.values(files).forEach(key => {
      if (key.default !== undefined && key.default instanceof Array) {
        key.default.forEach(item => routes.push(item))
      } else routes.push(key.default)
    })

  3. 环境变量的引用

    1
    2
    3
    //普通文件引用
    //vite中环境变量需以VITE_开头
    const { VITE_BASE_URL } = import.meta.env
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //vite.config.js
    import { defineConfig, loadEnv } from 'vite'
    export default ({ mode }) => {
      //使用vite的loadEnv获取到环境变量
      const { VITE_BASE_URL } = loadEnv(mode, process.cwd())
      return defineConfig({
        base: '/'
      })
    }