乐趣区

关于前端:VUE-30-源码-rollupconfigjs-对不同类型输出文件的注释

jiezi

文件门路：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，并且仅用于通过 <script src=”…”> 间接应用。

   format: `iife`
   https://developer.mozilla.org/en-US/docs/Glossary/IIFE
   iife 的全称是 Immediately Invoked Function Expression，即 "立刻调用的函数表达式"，能够很容易的用 JS 来表白：(function () {}())
   用于通过 <script src="..."> 间接应用。

（2）若要通过浏览器中的 <script src=”…”> 间接应用，则裸露 Vue 全局。

（3）vue.global.js 是蕴含编译器和运行时的“残缺”构建版本，因而它反对动静编译模板。

（4）vue.runtime.global.js 只蕴含运行时，并且须要在构建步骤期间预编译模板。

2、vue(.runtime).esm-browser(.prod).js：【应用 CDN 或没有构建工具】

（1）用于通过原生 ES 模块导入应用 (在浏览器中通过 <script type=”module”> 来应用)。

（2）与全局构建版本共享雷同的运行时编译、依赖内联和硬编码的 prod/dev 行为。

3、vue(.runtime).esm-bundler.js：【应用构建工具】

（1）vue.runtime.esm-bundler.js (默认) 仅运行时，并要求所有模板都要事后编译。
这是构建工具的默认入口 (通过 package.json 中的 module 字段)，
因为在应用构建工具时，模板通常是事后编译的 (例如：在 *.vue 文件中)。

（2）vue.esm-bundler.js 蕴含运行时编译器。如果你应用了一个构建工具，但依然想要运行时的模板编译 (例如，DOM 内 模板或通过内联 JavaScript 字符串的模板)，请应用这个文件。你须要配置你的构建工具，将 vue 设置为这个文件

4、vue.cjs(.prod).js：【服务端渲染】

（1）通过 require() 在 Node.js 服务器端渲染应用。

（2）如果你将应用程序与带有 target: ‘node’ 的 webpack 打包在一起，并正确地将 vue 内部化，则将加载此文件。

（3）dev/prod 文件是预构建的，然而会依据 process.env.NODE_ENV 主动加载相应的文件。

二、format: 打包格局

  • amd – 异步模块定义，用于像 RequireJS 这样的模块加载器
  • cjs – CommonJS，实用于 Node 和 Browserify/Webpack
  • esm – 将软件包保留为 ES 模块文件，在古代浏览器中能够通过 <script type=module> 标签引入
  • iife – 一个主动执行的性能，适宜作为 <script> 标签。（如果要为应用程序创立一个捆绑包，您可能想要应用它，因为它会使文件大小变小。）
  • umd – 通用模块定义，以 amd，cjs 和 iife 为一体
  • system – SystemJS 加载器格局

如果您对“前端源码”情有独钟，能够微信扫码关注上面的公众号二维码，内容始终继续更新中！
以后 VUE3.0 源码正在解析中，欢送捧场！

退出移动版