ray-note/web/Rollup 学习.md

• Rollup 打包
  • Tree Shaking：分析出没有使用的模块并自动擦除
    • 因为ES模块依赖关系是确定的，所以可以在编译阶段分析出依赖关系，对AST语法树中没有使用的节点进行删除
  • 常用配置
    • 多产物配置
      • 在 output 配置中，使用一个数组，把多种需求依次写上
    • 多入口配置
      • 和 多产物配置类似，把不同的入口文件，都一次用对象或者数组的方式写在input 的位置即可
    • 自定义 output 配置
      • 常用output配置

      output: {
      	// 产物输出目录
      	dir: path.resolve(__dirname, 'dist'),
      	// 以下三个配置项都可以使用这些占位符:
      	// 1. [name]: 去除文件后缀后的文件名
      	// 2. [hash]: 根据文件名和文件内容生成的 hash 值
      	// 3. [format]: 产物模块格式，如 es、cjs
      	// 4. [extname]: 产物后缀名(带`.`)
      	// 入口模块的输出文件名
      	entryFileNames: `[name].js`,
      	// 非入口模块(如动态 import)的输出文件名
      	chunkFileNames: 'chunk-[hash].js',
      	// 静态资源文件输出文件名
      	assetFileNames: 'assets/[name]-[hash][extname]',
      	// 产物输出格式，包括`amd`、`cjs`、`es`、`iife`、`umd`、`system`
      	format: 'cjs',
      	// 是否生成 sourcemap 文件
      	sourcemap: true,
      	// 如果是打包出 iife/umd 格式，需要对外暴露出一个全局变量，通过 name 配置变量名
      	name: 'MyBundle',
      	// 全局变量声明
      	globals: {
      	    // 项目中可以直接用`$`代替`jquery`
      		jquery: '$'
      	}
      }
      

    • 依赖external
      • 暂时不理解

    • 接入插件的能力