react开发组件并发包到npm

Toast组件

import ReactDomCli from 'react-dom/client';
import './style.css'
import React from 'react';

const Toast = (props) => {
    return <div className='Toast'>{props.msg}</div>
}

const div = document.createElement('div');
let toastRoot = null;
let unmountTimer = null;

export default {
    show(msg, time = 2000) {
        if (unmountTimer) {
            clearTimeout(unmountTimer);
            toastRoot.unmount();
            document.body.removeChild(div);
        }

        // 挂载
        toastRoot = ReactDomCli.createRoot(div);
        toastRoot.render(<Toast msg={msg} />);
        document.body.appendChild(div);

        // 过几秒卸载
        unmountTimer = setTimeout(() => {
            toastRoot.unmount();
            document.body.removeChild(div);
            unmountTimer = null;
        }, time)
    }
}

.Toast{
    position: fixed;
    top: 40%;
    left: 40%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
}

Button组件

import './style.css'
import React from 'react';

const Button = (props)=>{
    return <button className='DshBtn' {...props}>{props.children}</button>
}
export default Button;

.DshBtn {
  border-color: #1890ff;
  background-color: #1890ff;
  border-radius: 2px;
  color: white;
  padding: 6px;
  min- 80px;
  letter-spacing: 1px;
}

.DshBtn:hover{
    cursor: pointer;
}

index.js

export { default as Button }  from './Button';
export { default as Toast }  from './Toast';

发包方式1

组件开发者不用本地编译，直接将组件tsx等，发到npm上。
优点是非常的方便组件开发，几乎不用任何多余处理。
缺点是需要在项目引用的时候进行手动配置此node_modules/YourCmp进行编译（默认情况下，项目都会忽略node_modules里的代码编译），具体配置如下
webpack.config.js 修改rules字段，让只编译src扩充到也编译你的包，即可。

{
    test: /\.(js|mjs|jsx|ts|tsx)$/,  
    // 原来这有这个 include: paths.appSrc，
    // 其中paths.YourCmp即在path中定义的你组件包的路径 resolveApp('node_modules/YourCmp')
    include: [paths.appSrc,paths.YourCmp], 
    ...
}

发包方式2

因为方式1，使用者会很麻烦，所以一般不推荐，来说说方式2.
使用rollup打包，发布编译后的包。
1、需要集成babel
首先Rollup 是一个用于 JavaScript 的模块打包器，所以跟webpack一样它也或需要babel的协助，
其次react和jsx的解析，需要babel能力，Rollup的jsx插件是满足不了的

参考官网的集成方案

yarn add --dev @babel/core @rollup/plugin-babel @rollup/plugin-node-resolve

同时在rollup的配置文件rollup.config.js引用该插件

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel'; // resolve是babel用来处理import路径的

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [resolve(), babel()]
};

2、配置babel
babel默认只解析js，可是无法解析react的，所以还需要安装其预设包
注意1：网上有很多都让安装@babel/preset-env，这个预设包是用来es语法编译，但是我这里验证的是@babel/preset-react包里默认已经有了es语法编译功能，所以不用安装也可以。
注意2：@babel/preset-typescript用来编译ts的，如果项目里没用到的话，则不需要安装此包。

yarn add --dev @babel/preset-react

然后在根目录下创建babel的配置文件.babelrc.json

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

至此，如果你的react组件里没有使用css，就已经可以了，如果有，那就接着向下看

3、处理css
安装步骤参考这里

yarn add --dev postcss rollup-plugin-postcss

rollup使用此插件

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [resolve(), babel(),  postcss()] // 这里 postcss()即为使用
};

4、开始打包
至此，所以有的配置都完成了。
我们来安装rollup工具包

yarn add --dev rollup

然后运行一下命令，即可打包

npx run rollup --config

发包方式3

利用三方库，其实第二种方式，还是稍显麻烦，不方便文档、实时预览等，所以就有人开发了第三方工具。
dumi、 father、还有不好用的create-react-library等等