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
看看这个人多折腾
