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-width: 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

如果需要支持ts[x]的话，需要安装一下依赖

yarn add --dev typescript tslib @rollup/plugin-typescript

如果支持less的话，需要安装less

yarn add --dev less

如果支持图片导入的话，需要安装img插件

yarn add --dev @rollup/plugin-image

同时在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' // 或es
  },
  plugins: [
    resolve(),
    image(), // 如果需要图片导入的话
    babel({
      extensions: [".ts", ".tsx"], // 如果需要支持ts[x]的话 需要配置
    }),
    typescript(), // 如果需要支持ts[x]的话 需要配置
    postcss(),
  ]
};

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

就会发现打包成了一个文件，无法阅读，可以做一下修改

// ES Module打包输出
const esmOutput = {
  preserveModules: true,
  preserveModulesRoot: "src",
  // exports: 'named',
  assetFileNames: ({ name }) => {
    const { ext, dir, base } = path.parse(name);
    if (ext !== ".css") return "[name].[ext]";
    return path.join(dir, "style", base);
  },
};

export default {
  input: "src/index.ts",
  output: {
    ...esmOutput,
    dir: "dist",
    format: "es",
  },
  ...
};

发包方式3

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

dumi、 father、还有不好用的create-react-library等等

https://blog.csdn.net/Afterwards_/article/details/125290529

看看这个人多折腾