React components are published to npm

create library

Create a new folder test-react-library

Enter the project and initialize:

yarn init -y

Here -y is yes, which is equivalent to executing a carriage return all the way

Install dependencies

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

Create a new directory and file respectively, and the beginning of the slash indicates that it is in the root directory:

Location: /src/components/button/index.js. components

Add content:

import React from 'react' 
const Button = (props) => {
    
     
    return <button>{
    
    props.children || '自定义按钮'}</button> 
} 
export default Button

Location: /src/index.js. package entry

Add content:

import Button from './components/button/index' 
export {
    
     Button }

Location: /.babelrc. If not configured, jsx syntax cannot be recognized

Add content:

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

If jsx is not recognized, an error will be reported: Unterminated regular expression. JSX instructions cannot be recognized

Location: /rollup.config.mjs. For the packaged configuration, if the suffix is ​​written as .js, rollup@^3.0.0 will report an error because it does not recognize the es written in it, while rollup@^2.0.0 needs to use .js. For details, please refer to https://rollupjs.org/command-line-interface/#configuration-files

The content is:

import babel from 'rollup-plugin-babel'
export default{
    
    
    input:'./src/index.js',
    output:{
    
    
        file:'./lib/bundle.js',
        // 输出类型 (amd, cjs, es, iife, umd, system)：
        // iife——最早的模块，jQuery时代流行，封装成一个自执行函数，缺点是污染全局变量，且需手动维护script标签加载顺序
        // cjs——即CommonJS，解决了以上问题，但只运行在node.js环境，不支持浏览器。
        // amd——通过requirejs实现，支持浏览器，解决了前面所有问题，但写法复杂，可读性很差，不符合通用的模块化思维
        // umd——兼容了cjs和amd，但产生了更难理解的代码，包也增大
        // system——面向未来的模块依赖方式，微前端流行
        // es——现代化标准
        
        format:'cjs'    
    },
    plugins:[babel()],
    // 设置react为外部引用，可避免打包时打进去，否则警告(!) Unresolved dependencies
    external:['react']
}

Rollup Chinese documentation: Tutorial | rollup.js Chinese documentation | rollup.js Chinese website (rollupjs.com)

Pack

Excuting an order

yarn run rollup -c // -c是--config，即使用配置文件打包

You can see the packaged output file in /lib/bundle.js

Add the following code in package.json to simplify the execution instructions

  "scripts": {
    "注释": "下面的-c是使用配置文件，-w是watch，监视文件变化而打包",
    "build": "yarn run rollup -c",
    "dev": "yarn run rollup -c -w"
  }

test

Use the yarn registration link in the above library project:

yarn link

Modify the content in package.json as an external reference entry

"main": "lib/bundle.js",

Create a new react project with scaffolding

yarn create react-app test-react-project

After installing the dependencies, import the lib library

yarn link test-react-library

Import the Button component in the project and use it

import {Button} from '@daoke0818/test-react-library'
function App() {
  
  return (
    <div className="App">
        <Button/>
        <Button>给你起个名字</Button>
    </div>
  );
}

export default App;

Components are ready for use

publish to npm

Release the local soft connection under the test project

yarn unlink test-react-library

At this time, the page reports an error because the package cannot be found.
Switch to the custom library project and publish the version

npm publish --access public

You need to have an npm account before releasing the version. For specific questions, please refer to the simplest npm package delivery steps.
After success, you can search the package name on the npm official website
and return to the test project, stop the server, and install this package (note that if the package name is repeated, it needs to be modified before it can be published. Go up, don't forget the new package name when installing)

yarn add test-react-library

Restart, you can see that the page has been loaded normally, and the package referenced at this time comes from the npm server.

other

configuration file

The ignore configuration of git and yarn is also required in the project, and the specific content depends on the actual situation.

Location:/.gitignore

Add content:

node_modules
# 开发工具的设置等等

Location:/.yarnignore

Add content:

src
.gitignore

Current dependent libraries and versions

"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"rollup": "^3.21.6",
"rollup-plugin-babel": "^4.4.0"