JSSDK开发思路 基于RollupJS的经验记录
内容提要
文章介绍用 Rollup 打包 JS 类库的实践。作者因官网文档过时（如默认 Babel 版本不符）而整理可复用配置：创建项目并初始化，安装 rollup 及 node-resolve、babel、commonjs、json、alias、terser、banner 等插件；编写 rollup.config.js，设置入口、多版本输出（未压缩调试版与压缩发布版）、UMD 格式及全局变量；配合 .babelrc 转译 ES6 以兼容旧浏览器，最终在 main.js 导出变量供调用。
延伸解读
官网文档滞后带来的配置风险
文章指出 Rollup 官网资料存在版本更新滞后问题，最典型的是 Babel 默认版本说明与实际安装不符：官网称默认 Babel6，但 npm 安装得到 Babel7+，两者配置方式差异很大。这提醒读者不能完全照搬官网或旧博文，需以实际安装的依赖版本为准，并优先参考与当前版本匹配的配置示例，否则容易在搭建阶段反复踩坑。
多版本输出与调试发布分离
配置中 output 使用数组，同时生成未压缩的 demo 调试版和经 terser 压缩的发布版，发布版还按 package.json 版本号归入独立文件夹。这种做法的实用价值在于：开发阶段可直接引用未混淆文件便于排查，发布时则输出带版本目录的压缩产物，避免不同版本文件混在一起，也减少手动整理发布包的步骤。
插件组合解决类库常见依赖问题
文章列出的插件各有明确用途：node-resolve 识别 node_modules 包，commonjs 转换 axios、qs 等 CommonJS 模块，json 支持从 package.json 读取版本信息，alias 配置路径别名，banner 添加开发者与版本注释。这些插件共同覆盖了类库开发中常见的模块兼容、版本管理和代码标识需求，缺省时可能导致构建失败或产物信息不全。
Babel 配置需兼顾旧浏览器与模块保留
作者提供的 .babelrc 使用 preset-env 并设置 modules: false，以保留 ES 模块供 Rollup 处理，同时通过 targets 覆盖 IE11 等旧环境，并启用 useBuiltIns: usage 按需引入 polyfill。这说明类库打包时 Babel 与 Rollup 的分工需要协调：Babel 负责语法降级和兼容性补齐，Rollup 负责模块打包，两者配置不当可能影响最终产物的兼容范围。
Q&A
用Rollup打包JS类库时，需要安装哪些基础依赖包？
需要安装rollup核心包，以及@rollup/plugin-node-resolve、@rollup/plugin-babel、@rollup/plugin-commonjs、@rollup/plugin-json、@rollup/plugin-alias、rollup-plugin-terser、rollup-plugin-banner等插件，还有@babel/core、@babel/plugin-proposal-class-properties、@babel/preset-env这些Babel相关包。
Rollup的配置文件rollup.config.js中，output字段如何配置才能同时生成调试版和压缩版？
output是一个数组，可以配置多个输出对象。例如一个对象设置file为'demo/js/demo.js'、format为'umd'、name为'demo'，不添加压缩插件，生成未压缩的调试版；另一个对象设置file为'dist/${process.env.npm_package_version}/demo.min.js'、format为'umd'、name为'demo'，并在plugins中添加terser()，生成压缩的发布版。
为什么按照Rollup官网文档配置Babel时会遇到问题？
因为官网文档更新不及时，默认说明基于Babel 6，但实际从npm安装时默认安装的是Babel 7+，两者配置方式完全不同，导致按照官网指导无法正常配置。
在Rollup配置中，output.format的umd选项有什么作用？
umd是通用模块格式，包含amd、cjs、iife为一体，打包后的文件可以通过全局变量访问，类似于jQuery的window.jQuery，方便在不同环境中使用。
如何配置Babel以兼容低版本IE浏览器？
在项目根目录创建.babelrc文件，配置presets为@babel/preset-env，设置targets.browsers为'> 1%, IE 11, not op_mini all, not dead'，并设置useBuiltIns为'usage'、corejs为2，同时添加@babel/plugin-proposal-class-properties插件。
Rollup打包后，如何在HTML中引入并使用类库？
在main.js中通过export default导出一个变量（如demo实例），打包后生成UMD文件。在HTML中通过script标签引入该文件，即可通过全局变量（如demo）访问类库的方法，例如demo.sayHi('name')。
