This is the 15th day of my participation in the August Text Challenge.More challenges in August

Rollup Packages the React component

1. Create the project file

mkdir my-react-library
Copy the code

2. Go to the file and initialize the package.json file

cd my-react-library
yarn init -y 
Copy the code

3. Install rollup and related plug-ins

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

4. Create a file relative to

SRC folder: lib folder where source code is stored: lib folder where compiled files are stored. Gitignore: ignore node_modules. Yarnignore: Ignore SRC,.gitignor, and ensure that the.babelrc code in lib after the upload: configure the Babel parsing pluginCopy the code

The root directory creates rollup.config.js

Detailed configuration is explained in the file 1, format

Amd -- Asynchronous module definition for module loaders like RequireJS CJS -- CommonJS for Node and Browserify/Webpack ESM -- Save packages as ES module files, Iife can be introduced in modern browsers via the <script type=module> tag - an auto-executing feature suitable as a <script> tag. (If you're creating a bundle for your application, you might want to use it because it makes the file size smaller.) Umd - Generic module definition, in amd, CJS and IIFE as one system-SystemJS loader formatCopy the code

5. Preliminary packing

yarn run rollup -c
Copy the code

6. Add packaging script to package.json file

New in package. Json

"Build ": "yarn run rollup -c", // package "start": "yarn Run rollup -c -w" // Listen for file changes and packageCopy the code

7. Fix the main file entry

"main": "lib/bundle.js"
Copy the code

8. Run yarn Link

Explain how YARN Link works

When two or more projects depend on each other during development, yarn Link can be used to link one project to another. If project B needs to be used in project A, you can use YARN Link or NPM Link to import project B to PROJECT A. Link is a soft link. Yarn link stores resources in yarn memory to establish a channelCopy the code

After yarn Link is executed, the my-React-library code is stored in yarn memory

9, open another project, link project

 yarn link my-react-library
Copy the code

Add CSS and animation library

yarn add styled-components
yarn add @emotion/core
yarn add  framer-motion
Copy the code

React develops component code

(1) a rollup. Config. Js

Import Babel from 'rollup-plugin-babel' export default {// import Babel from 'rollup-plugin-babel' export default {// import Babel from 'rollup-plugin-babel' export default {// import Babel from 'rollup-plugin-babel' export default {// import Babel input: './ SRC /index.js', // export Babel output:{file: Plugins: [Babel ()], external: ['react', 'styled- Components ']}Copy the code

(2) Switch. Js code

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 ? Zero: 'unset'} `}> </motion.div> {/* <StyledSwitch>Switch Hello</StyledSwitch> */} </motion.div> ) } const StyledSwitch = styled.h1`color: hotpink`; export default SwitchCopy the code

(3) package. The json code

{" 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":" Add 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", "a rollup" : "^ 2.56.2", "a rollup - plugin - Babel" : "^ 4.4.0"}, "dependencies" : {" @ emotion/core ":" ^ 11.0.0 ", "framer - motion" : "^ 4.1.17", "styled - components" : "^ 5.3.0"}}Copy the code

12, release

yarn publish
Copy the code