Panel

使用了@emotion/react库来编写其 css

Switch

使用了styled-components库来编写其 css

注意

这里不是为了讲解这两个库的使用，而是为了如何练习使用 Rollup来建构一个 js 库的过程

目录说明文件

这里主要是用 react 来发开组件库

• src js库开发目录
• lib 是我们通过使用Rollup 构建工具所打包出来的最终目录，用以提供给需要者使用
• .gitignore 用来配合 git 进行版本管理的，这里我们添加了node_modules 表示该文件/文件夹不会提交到 git 上
• package.json 包说明文件 重点关注 main 属性，它是指向我们打包好的的入口文件
• rollup.config.js---Rollup 的配置文件

步骤

• 执行命令：yarn add rollup --dev 安装 Rollup
• 安装 @babel/core, @babel/preset-env, @babel/preset-react, @emotion/babel-preset-css-prop, @emotion/react, @rollup/plugin-babel, styled-components 库，这里因为用到了这些库，所以需要安装，如果没有用到可不安装
• package.json 添加 "test": "rollup -c -w" -c 表示使用 rollup.config.js 默认配置文件 -w 表示监制 开发目录下文件的改变，有修改自动重新打包
• js 库开发完成后通过使用 yarn run test 来执行打包

测试

在当前开发根目录下执行命令yarn link

• 使用 npx create-react-app 来创建一个 react 项目，在该项目中使用yarn link rollup_react_library 安装之前开发的react 库 rollup_react_library 命名使用的是 package.json 中的"name"属性值
• 在库的开发目录下使用 yarn unlink rollup_react_library 可以取消一个库的链接

rollup.config.js

• input 开发目录入口文件 一般情况下建议入口文件为一个 如有多个组件则统一从 index.js 导出 具体见用例
• output 通过使用 rollup 打包后输出目录的目录，请取名为 lib

[
    {
      file: "./lib/bundle.cjs.js", // 打包后输出目录
      format: "cjs",// 打包所使用的格式
      name: "Switch",
    }
]    

这个视频教大家如何使用 Rollup 构建一个库，并且发布到 npm 上