Vite-进阶知识

// Vite 中的编译工具
1. 在开发环境时使用了 ESbuild
2. 在线上环境时使用了 Rollup
----------------------------------------------------------------------------------------------
// Rollup
1. 默认支持 Tree Shaking，且推荐使用 ESM 的模块规范
2. 正常命令行的参数都有全拼和缩写功能
  1. rollup --version === rollup -v
  2. rollup --help === rollup -h
3. 更多命令
  // -i 是 --input 的缩写，即入口的意思
  1. rollup -i index.js --file dist.js --format cjs // 入口文件是 index.js，编译后的文件名是 dist.js，以 cjs 模式编译
  2. rollup -i a.js -i b.js --dir dist // 同时编译两个文件，编译输出到 dist 文件夹下
  3. rollup -i index.js --format iife // 输出自执行的函数，除了 iife 还有 es、cjs、umd 模式
  4. rollup -i index.js --file dist.js --watch // 监听文件变化自动编译
4. 配置文件
  1. ESM
    rollup.config.js // ESM
    export default {
      input: 'index.js',
      output: {
        file: 'dist.js',
        format: 'umd',
        name: 'Index' // 使用 umd 规范时，需要声明 name，因为 umd 需要挂载到对应的命名空间上
      }
    }
    执行命令：rollup --config rollup.config.js
  2. cjs
    rollu.config.cjs // cjs
    module.exports = {
      input: 'index.js',
      output: {
        file: 'dist.js',
        format: 'umd',
        name: 'Index' // 使用 umd 规范时，需要声明 name，因为 umd 需要挂载到对应的命名空间上
      }
    }
    执行命令：rollup --config rollup.config.cjs
5. 环境变量：rollup --config rollup.config.js --environment TEST:123
  // rollup.config.js
  console.log(process.env.TEST) //123
6. Rollup Plugins // 提供了 Rollup 的各种丰富的能力
  1. 配置
    import resolve from '@rollup/plugin-node-resolve' // 把当前文件引入的模块打包在一起，npm i '@rollup/plugin-node-resolve'
    import json from '@rollup/plugin-json' // 可以 import json 文件，npm i '@rollup/plugin-json'
    import commonjs from '@rollup/plugin-commonjs' // 可以使用 ESM 模式导入以 cjs 导出的文件，npm i '@rollup/plugin-commonjs'
    import { terser } from 'rollup/plugin-terser' // 打包压缩，npm i 'rollup/plugin-terser'
    // rollup.config.js
    export default {
      input: 'index.js',
      external: ['react'], // 不把 react 和文件打包在一起，和 resolve plugin 作用相反
      output: {
        file: 'dist.js',
        format: 'es',
        plugins: [terser()], // 这边的 plugin 只有在输出时才执行，相对比较少
        banner: '/** Hello **/' // 在打包好的文件顶部注入对应的文字，使用 terser 压缩后不生效
      },
      plugins: [resolve(), commonjs(), json()] // 放在前面的插件先执行，有些插件有顺序要求，如 commonjs 要放在 babel 的前面
    }
  2. 建议配置文件可以使用数组，而不是对象，这样后期方便扩展，output 也支持配置数组
  3. Rollup 的编译流程就是调用各个插件执行，最后输出
  4. Rollup 的插件和 Webpack 类型，都可以在对应的 Hook 中执行对应的操作，具体可查看官网
----------------------------------------------------------------------------------------------
// esbuild
1. 无法编译 es5 的代码，在 Vite 中只在开发环境中使用，编译目标是 esnext