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,并且仅用于通过 <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 源码正在解析中,欢迎捧场!
上一篇: 使用游标获取数据(转)