Rollup打包npm组件 | Big-Xiong’s Blog

date

slug

status

背景

qiankun架构下，各个子应用组件都是复用主应用的组件，导致主应用组件一旦修改，就得复制粘贴同步到所有子应用，效率非常低，且人为操作容易出错，所以考虑将公共组件和公共方法进行抽离，弄成npm包，上传到私服，后期维护更改只需子应用重新install npm包即可。

调研

转译器：babel、esbuild、tsc、swc

打包器：rollup、webpack、vite(esbuild二次封装，vue3仅在开发使用，生产是rollup)、parcel、snowpack、gulp、esbuild

rollup

rollup是一个JavaScript模块打包器，它可以将多个JavaScript模块打包成一个文件。与其他打包工具不同，rollup专注于打包ES6模块，这使得输出的JavaScript文件更加优化和轻量化。rollup还支持插件系统，可以通过插件实现各种自定义行为，例如将CSS文件打包成单独的文件或优化输出的JavaScript文件。rollup是一个快速、简单和优化的打包工具，特别适合打包库和组件。

webpack

webpack 打包的配置繁琐，打包后的文件体积也不太乐观，通过 webpack 打包构建出来的源代码会增加很多工具函数以外的模块依赖代码。

但是webpack5 原生提供了 ModuleFederationPlugin（模块联邦）插件也可用来解决多个应用之间代码共享的问题，实现跨应用的代码共享。

vite

Vite是对esbuild的二次封装，目前只适合在在开发环境进行预构建, vue3生产环境也是使用的Rollup打包, 后续也有可能使用ESBuild进行生产环境的构建。

除了npm私服这种方式来解决代码共享，webpack5提供的模块联邦新特性也可以实现，考虑项目中已存在npm私服，便考虑npm包的方式来实现代码共享

Rollup全家桶

rollup（工具库打包构建核心包）

rollup-plugin-livereload（rollup 插件，热更新，方便本地 debugger 开发）

rollup-plugin-serve（rollup 插件，本地服务代理，方便在本地 html 中调试工具）

rollup-plugin-terser（rollup 插件，代码压缩混淆）

rollup-plugin-visualizer（rollup 插件，可视化并分析 Rollup bundle，以查看模块占用）

@rollup/plugin-babel（rollup 插件，rollup 的 babel 插件，ES6 转 ES5）

@rollup/plugin-commonjs（rollup 插件，用来将 CommonJS 模块转换为 ES6，这样它们就可以包含在 Rollup 包中）

@rollup/plugin-json（rollup 插件，它将.json 文件转换为 ES6 模块）

@rollup/plugin-node-resolve（rollup 插件，它使用节点解析算法定位模块，用于在节点模块中使用第三方 node_modules 包）

@rollup/plugin-typescript（rollup 插件，对 typescript 的支持，将 typescript 进行 tsc 转为 js）

常用命令

rollup —help 帮助命令

rollup --help 是一个命令行指令，它展示了 Rollup 提供的所有命令行选项和参数，可以帮助用户了解 Rollup 的使用方法和配置选项。


Usage: rollup [options]

Options:
  -c, --config <filename>               use this config file (if argument is
                                        omitted, rollup.config.js will be
                                        used if it exists, or else
                                        rollup.config.ts)
  -i, --input <files...>                the entry point(s) of your
                                        application/module
  -o, --file <output>                   the output file (if absent, prints to
                                        stdout)
  -d, --dir <outputDirectory>           the directory in which to place
                                        outputted files
  -f, --format <format>                 the format of the generated bundle
                                        (amd, cjs, es, iife, umd, system)
  -e, --external <ids...>               make this module id external
  -g, --globals <pairs...>              specify global variable names to use,
                                        e.g. -g jquery:$,React:MyReact
  -n, --name <name>                     the name to use for the generated
                                        module bundle (required for IIFE
                                        /UMD)
  -w, --watch                           watch files in bundle for changes
  --watch-stdin                         [experimental] read bundle config from
                                        stdin
  --experimental-optimizations          [experimental] enable additional
                                        experimental code optimizations
  --no-treeshake                        disable tree shaking
  --silent                              suppresses logging
  --intro <intro>                       content to insert at top of bundle
  --outro <outro>                       content to insert at end of bundle
  --banner <banner>                     content to insert at top of output
  --footer <footer>                     content to insert at end of output
  -m, --sourcemap                       generate sourcemap (`-m inline` for
                                        inline map)
  --sourcemap-file <path>               file to write sourcemap to (or use
                                        `--dir` and `--sourcemap-path`
                                        together)
  --sourcemap-path-transform <function> transform the generated sourcemap
                                        path, e.g. `--sourcemap-
                                        path-transform '{"foo": "bar" }'`
                                        changes `path/to/file.js` to
                                        `{foo}/file.js`
  --silent                              suppresses logging
  --no-progress                         do not print progress updates
  --config-stdin                        read config from stdin
  --config-branch <branchName>          select a branch of the exported
                                        configuration (default: `main`)
  --config-plugins <commaSeparatedList> plugins to use (default: all)
  --config-search <searchDir>           use the specified directory as the
                                        root for resolving configurations
                                        (default: `process.cwd()`)
  --config-env <envName>                 environment variables to expose when
                                        loading the config file
  --no-interop                          do not generate an `interop` block
  -h, --help                            output usage information

rollup —version 查看版本

rollup -i input.js -o output.js 打包入口文件并生成一个文件输出

rollup —watch 监视文件修改并自动重新打包

rollup —config 使用配置文件构建项目

rollup —environment NODE_ENV:development 指定环境变量

配置文件

rollup.config.js


export default {
	input: 'package/index.js', // 入口文件
	output: [
		file: 'dist/index.es.js',
		format: 'es',
		name: 'shot-ui',
		golbals: {},
		exports: 'named'
	], // 输出文件支持{}或者[],需要输出多个文件时使用数组
	plugins: [
		
	], // 插件 rollup全家桶
	external: [] // 文件中使用外部库
}

package.json


{
	"name": "shot-ui",
	"main": "dist/index.es.js", // 项目中使用的文件
	"scripts": {
		"package": "rollup -c", // 编译打包
	},
	"files": {
		"dist",
		"libs",
		"packages",
		"service",
	}, // 上传到私服的文件
}

编译打包


npm run package // 打包
npm login --registry http://nexus私服地址 回车输入账号密码
npm publish --registry http//nexus私服地址 上传文件到私服

npm i shot-ui // 下载npm包在项目中使用