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

最新推荐文章于 2024-06-29 11:40:13 发布

老罗-laoluo

最新推荐文章于 2024-06-29 11:40:13 发布

阅读量381

点赞数 1

分类专栏： VUE 3.0 源码：阅读_注释_解析文章标签： javascript vue.js typescript 源码前端

本文链接：https://blog.csdn.net/roywang6/article/details/122054477

版权

本文详细解读Vue 3.0源码中rollup.config.js的outputConfigs，分析不同打包输出文件如全局打包、ES模块及CommonJS格式的区别，适合CDN直接引用或构建工具使用。同时介绍了format参数的不同类型，如AMD、CommonJS、ESM和IIFE等，帮助前端开发者更好地理解和使用Vue 3.0。

摘要由CSDN通过智能技术生成

文件路径：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(`dis