前段时间基于Vue3开发了一个组件UI库项目，希望将组件库上传到npm，技术选型使用了Rollup对库文件进行打包，写一篇博客记录以一下实现的步骤，方便后续参考

使用rollup打包

认识rollup

官网对Rollup的介绍如下：

是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。它使用的是ES6版本的模块标准ES Module，只打包 js ，打包速度快，打包生成的包体积小

开发框架/ 组件库的时候使用 Rollup 更合适

创建 lib/index.ts

将所有需要导出的组件导出

export { default as Switch } from './Switch.vue'
// 上面是import Switch from './Switch.vue';export {Switch}的简写
export { default as Button } from './Button.vue'
export { default as Tabs } from './Tabs.vue'
export { default as Tab } from './Tab.vue'

配置rollup.config.js

首先安装以下插件

rollup-plugin-esbuild 将ts编译成ES6

@vitejs/plugin-vue

rollup-plugin-scss 转译scss文件，配合DartSass使用

rollup-plugin-terser 代码压缩插件，转译es6+语法

在根目录新建一个rollup.config.js文件，写入以下配置

// 请先安装 rollup-plugin-esbuild @vitejs/plugin-vue rollup-plugin-scss sass rollup-plugin-terser

import esbuild from 'rollup-plugin-esbuild'
import vue from '@vitejs/plugin-vue' 
import scss from 'rollup-plugin-scss'
import dartSass from 'sass' 
import { terser } from 'rollup-plugin-terser' 

export default {
  input: 'src/lib/index.ts', // 入口文件地址
  output: {
    globals: {
      vue: 'Vue', // 指明global.Vue即是外部依赖vue
    },
    name: 'Diamond-UI',
    file: 'dist/lib/diamond-ui.js', // 输出文件
    format: 'umd', // 使用什么样的模块化机制
    plugins: [terser()],
  },
  plugins: [
    scss({ include: /.scss$/, sass: dartSass }),
    vue({
      include: /.vue$/,
    }),
    esbuild({
      include: /.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015',
    }),
  ],
}

运行`rollup -c`

请先全局安装 rollup（或者局部安装）

打包文件如下

npm包上传

这一步的目的是将 dist/lib/ 上传到npm的服务器，供其他开发者下载使用.

如果你打算发布你的软件包，你的package.json中最重要的东西是name和version字段，因为它们将是必需的。

需要在package.json添加如下配置

{
  "name": "diamond-vue-ui",
  "version": "0.0.1",
  "files": [
    "dist/lib/*"
  ],
  "main": "dist/lib/diamond-ui.js",
}

其中files字段是上一步rollup打包的文件，也是用户安装你的软件包时会下载的文件

main字段是项目主文件，假设项目名name为foo，用户使用require("foo")，即可引入该主文件的module.exports对象

在执行npm publish之前，保证没有使用淘宝源

npm config get registry

npm config set registry registry.npmjs.org/

接下来将打包好的库上传到npm，首先登陆账号，在命令行中输入 npm login

$ npm login
npm WARN adduser `adduser` will be split into `login` and `register` in a future version. `adduser` will become an alias of `register`. `login` (currently an alias) will become its own command.
npm notice Log in on https://registry.npmjs.org/
Username: xxxx
Password: xxxx
Email: (this IS public) xxxx
npm notice Please check your email for a one-time password (OTP)
Enter one-time password: xxxxxx
Logged in as xxx on https://registry.npmjs.org/.

登录成功后发布包

$ npm publish 
npm notice 
npm notice 📦  diamond-vue-ui@0.0.2
npm notice === Tarball Contents === 
npm notice 505B  README.md              
npm notice 7.1kB dist/lib/diamond-ui.css
npm notice 5.5kB dist/lib/diamond-ui.js 
npm notice 622B  package.json           
npm notice === Tarball Details === 
npm notice name:          diamond-vue-ui                          
npm notice version:       0.0.2                                   
npm notice filename:      diamond-vue-ui-0.0.2.tgz                
npm notice package size:  4.3 kB                                  
npm notice unpacked size: 13.7 kB                                 
npm notice shasum:        b826a8f3985f292889f045edb77815bfdbc6c941
npm notice integrity:     sha512-ARNYbC3u0Aiq8[...]dpXj/5dQNRWtA==
npm notice total files:   4                                       
npm notice 
npm notice Publishing to https://registry.npmjs.org/
+ diamond-vue-ui@0.0.2

下载包并进行测试

npm i diamond-vue-ui

Rollup打包组件库发布到npm