这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

rollup打包react组件

1, 创建项目文件

mkdir my-react-library

2, 进入文件，初始化package.json文件

cd my-react-library
yarn init -y 

3, 安装rollup和相关插件

 yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react 
 @emotion/babel-preset-css-prop -D

4, 创建相对于的文件

src文件夹： 存放源代码的
lib文件夹： 存放编译之后的文件
.gitignore: 忽略掉node_modules文件
.yarnignore: 忽略掉src, .gitignor, 保证上传的文件之后lib里面的代码
.babelrc:   配置babel解析插件

根目录创建rollup.config.js

详细的配置在文件中说明 1， 格式（format）

amd – 异步模块定义，用于像RequireJS这样的模块加载器
cjs – CommonJS，适用于 Node 和 Browserify/Webpack
esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过 <script type=module> 标签引入
iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，
因为它会使文件大小变小。）
umd – 通用模块定义，以amd，cjs 和 iife 为一体
system - SystemJS 加载器格式

5, 初步打包

yarn run rollup -c

6, package.json文件添加打包脚本

package.json新增

"build": "yarn run rollup -c",  // 打包
"start": "yarn run rollup -c -w"  // 监听文件变化，打包

7, 修复main文件入口

"main": "lib/bundle.js"

8, 执行yarn link

解释一下yarn link的原理

开发过程中，两个或多个项目之间相互依赖时，可以使用yarn link将一个项目链接到另一个项目。
项目A中需要使用项目B时，可以使用yarn link或npm link将B引入到A。
link本身是软链接，yarn link是将资源存在yarn的内存中，相当于建立了一个通道

执行完yarn link之后，相当于把my-react-library代码存在yarn内存中

9, 打开另外一个项目，链接项目

 yarn link my-react-library

10，添加 css,和动画库

yarn add styled-components
yarn add @emotion/core
yarn add  framer-motion

11，react开发组件代码

（1）rollup.config.js

import babel from 'rollup-plugin-babel'
export default {
  // 入口文件
  input: './src/index.js',
  // 出口文件
  output:{
    file: './lib/bundle.js', // 输出的文件
    format: 'cjs' // 输出的格式
  },
  plugins: [babel()],
  external: ['react', 'styled-components']
}

(2) Switch.js代码

import React, {useState} from 'react'
import styled from 'styled-components'
import { css } from '@emotion/core'
import { motion } from 'framer-motion'
const Switch = () => {
  const [state, setState] = useState(false)
  const handleOntap = () => {
    setState(!state)
  }
  return (
    <motion.div className="container" css={css`
      width:100px;
      height: 50px;
      background: whitesmoke;
      border-radius: 50px;
      position: relative;
    `}
    onTap={handleOntap}
    >
      <motion.div className="ball" css={css`
        width: 50px;
        height: 50px;
        background:royalblue;
        border-radius:50px;
        position: absolute;
        left: ${state ? 'unset' : 0};
        right: ${state ? 0 : 'unset'}
      `}>

      </motion.div>
     {/* <StyledSwitch>Switch Hello</StyledSwitch> */}
    </motion.div>
  )
}
const StyledSwitch = styled.h1`color: hotpink`;
export default Switch

(3) package.json代码

{
  "name": "my-react-library",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "yarn run rollup -c",
    "start": "yarn run rollup -c -w"
  },
  "description": "添加描述",
  "keywords": ["SWITCH"],
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "rollup": "^2.56.2",
    "rollup-plugin-babel": "^4.4.0"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "framer-motion": "^4.1.17",
    "styled-components": "^5.3.0"
  }
}

12， 发布

yarn publish