Create the folder Cheney-react-library

Go to the folder YARN init -y

Install the key package yarn add rollup rollup-plugin- babel@babel/core@babel /preset-env @babel/preset-react -d

Create SRC /index.js, SRC /Components/ switch.js, lib in the project root directory

The project root directory is created.gitignore for Git ignore management

node_modules
Copy the code

We use YARN to distribute packages. Create.yarnignore in the project root directory for yarnignore management

src
.gitignore
Copy the code

The project root directory creates.babelrc to configure Babel

{
	"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Copy the code

The project root directory creates rollup.config.js for rollup configuration

import babel from 'rollup-plugin-babel'

export default {
	input: './src/index.js',
	output: {
		file: './lib/index.js',
		format: 'cjs'
	},
	plugins: [babel()]
}
Copy the code

SRC/Components/Switch. Js writes

import React from 'react'

export default function Switch() {
    return (
        <h1>Switch</h1>
    )
}
Copy the code

SRC/index. Js writes

// import Switch from './Components/Switch' // export {Switch} export {default as Switch} from './Components/Switch'Copy the code

The project directory is

Run yarn Run rollup -c to package the yarn. The package is successfully packaged

But there was a caveat

(!) Unresolved dependencies https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency react (imported by  src/Components/Switch.js)Copy the code

React is an external dependency. We need to make react an external dependency in rollup.config.js to avoid packing it in every time

import babel from 'rollup-plugin-babel'

export default {
   ...
   external: ['react']
}
Copy the code

Run yarn Run rollup -c to package the yarn. The package is successfully packaged without warning

Let’s tidy up the commands in package.json

In the future, we can execute yarn build and yarn start instead of writing a long list of commands

Yarn Run rollup -c -w The -w of yarn Run rollup -c -w is a monitoring function. If we change the code, it will automatically respond to the update

If you want to debug locally, run the YARN Link local registry package in the root directory, then run the YARN Link Cheney-React-library in another project root directory to link our component. If you don’t want to link, Run yarn unlink Cheney-react-library

If you want to publish packages to NPM, you need to check for readme. md in the root directory, or add something if you don’t

## How to use

​```bash
npm i cheney-react-library
​```
Copy the code

Also check whether main in package.json is lib/bundle.js and add author, description, and keywords

Description is the package description

Check whether the NPM mirror address is correct. If not, switch to the NPM mirror address

npm config get registry

Then run YARN Publish, enter your personal information, and you will see the publication step by step

If the error message image appears in step 3

error Couldn’t publish package:”… : You do not have permission to publish \”… \”. Are you logged in as the correct user?” This means that our package name is the same as an existing package name in the repository and needs to be changed. You can check whether the yarn Info package name exists in the warehouse

After successful publishing, you can search for your own package in the NPM repository

If you want to undo your distributed package, run

NPM unpublish package name --force

Or undo a version

NPM unpublish package name @version