# hlxy-switch

> my first react library

Latest version **1.0.1** (published 2021-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install hlxy-switch
pnpm add hlxy-switch
yarn add hlxy-switch
bun add hlxy-switch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-17 |
| First published | 2021-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xiaodishu |
| Maintainers | xiaodishu |

## Links

- npm: https://www.npmjs.com/package/hlxy-switch
- npm.io page: https://npm.io/package/hlxy-switch

## Dependencies (3)

- [framer-motion](https://npm.io/package/framer-motion.md) ^3.10.5
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.5
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1

## Recent versions

- 1.0.1 (latest) — 2021-03-17
- 1.0.0 — 2021-03-17

## README

初始化:
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

---
_Source: https://npm.io/package/hlxy-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._