VUE 3.0 源码 rollup.config.js 对不同类型输出文件的注释

文件路径:VUE 3.0 源码 /rollup.config.js

roollup 打包文件指令模板如下:

rollup main.js --file bundle.js --format iife

rollup.config.js 文件中同样有这么一个变量:outputConfigs,里面定义了不同类型的输出文件的名称"file" & "format",具体如下:

const outputConfigs = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: `es`
  },
  'esm-browser': {
    file: resolve(`dist/${name}.esm-browser.js`),
    format: `es`
  },
  cjs: {
    file: resolve(`dist/${name}.cjs.js`),
    format: `cjs`
  },
  global: {
    file: resolve(`dist/${name}.global.js`),
    format: `iife`
  },

  // runtime-only builds, for main "vue" package only
  'esm-bundler-runtime': {
    file: resolve(`dist/${name}.runtime.esm-bundler.js`),
    format: `es`
  },
  'esm-browser-runtime': {
    file: resolve(`dist/${name}.runtime.esm-browser.js`),
    format: 'es'
  },
  'global-runtime': {
    file: resolve(`dist/${name}.runtime.global.js`),
    format: 'iife'
  }
}

对于初学者初次看到有点懵B,下面从 "file" 和 "format" 以下两个维度说一下我个人的理解:

一、打包输出文件(file)的不同:

1、全局打包: vue(.runtime).global(.prod).js:【使用 CDN 或没有构建工具】

(1)全局打包不是 UMD 构建的,它们被打包成 IIFEs,并且仅用于通过

你可能感兴趣的:(前端vue.js源码分析)