hlxy-switch v1.0.1

初始化: yarn init -y

下载依赖 rollup相关和关键的babel yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react @emotion/babel-preset-css-prop -D

新建src/index.js lib(输出文件目录) src/components/Switch.js(组件目录/组件)

新建.gitignore 里面直接填进去node_modules 把node_modules屏蔽掉

新建.yarnignore 里面填进去src .gitignore 屏蔽掉 换个行就行

新建rollup.config.js import babel from 'rollup-plugin-babel' //必须选项就行 export default{ input:'./src/index.js', //入口文件 output:{ //出口 file:'./lib/bundle.js', //出口文件 format:'cjs' // amd->require cjs->node 我们用node方式就行 } plugins:babel() }

新建.babelrc babel依赖 { "presets": "@babel/preset-env", "@babel/preset-react" }

消除React外部引入时打包警告 在rollup.config.js里面
在plugins:babel()后面加上 external:'react'

随便在Switch.js里面写点东西
import React from 'react' export default function Switch() { return (

  <h1>Switch</h1>
)

}

在index.js 里面把Switch引入进去就行
export { default as Switch } from './Components/Switch'

打包: yarn run rollup -c

在package.json里面 加上 "scripts": { "build": "yarn run rollup -c", "start": "yarn run rollup -c -w" }, 简化打包流程 -w就是实时监听 w就是watch

输入yarn link 让my-react-library建立链接

在另一个项目里引用： 1.yarn link my-react-library 连接my-react-library 2.注意在my-react-library项目中的lib生成的定义的生成文件名 必须和package.json中的main字段定义的一致就行 3.用之前定义的yarn start就行 可以随时更改刷新了 4.可以使用styled-components插件去做(注意:需要在rollup.config.js文件中 external数组中添加styled-components也是避免警告) 5.yarn add @emotion/react 也可以使用@emotion/react 来做 在Switch.js中 import {css} from "@emotion/react";
在.babelrc中 presets中添加@emotion/babel-preset-css-prop(因为识别不了@emotion/core的语法) 6.yarn add framer-motion 添加一下动画库

最后发布到npm上去: 在package.json中（就在scripts下面的位置就行）添加： "description": "华龙信用Switch", //这是包描述 "keyWords": //这是为了方便npm上能搜索到 "react", "react library", "raect swich", "华龙信用Switch" , yarn publish 输入你的npm密码就行（反正按照提示操作挺简单的） 如果失败：yarn info 包名 检查下npm是否有同名包 找到了没被注册的 就改下package.json name