您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~
前段时间一直在更新react组件库的每一个组件，今天来测试一下在实际业务中使用组件库~
我使用了rollup来打包组件库
1.搭建库打包脚手架：
首先我们安装一下rollup：
npm i rollup -g
我的组件库项目目录是这样的，所有组件都在index.ts中暴露出去
代码写好以后，最基础的rollup.config.js版本可以这样配置：
// rollup.config.js
export default {
input: 'src/index.ts',
output: {
file: 'cjs.js',
format: 'cjs'
}
};
在终端执行：
rollup -c
即可完成打包
2.rollup插件使用
为了更灵活的打包库文件，我们可以配置rollup插件，比较实用的插件有： rollup-plugin-node-resolve ---帮助 Rollup 查找外部模块，然后导入 rollup-plugin-commonjs ---将CommonJS模块转换为 ES2015 供 Rollup 处理 rollup-plugin-babel --- 让我们可以使用es6新特性来编写代码 rollup-plugin-terser --- 压缩js代码，包括es6代码压缩 * rollup-plugin-eslint --- js代码检测
打包一个库用以上插件完全够用了，不过如果想实现对react等组件的代码，可以有更多的插件可以使用，这里就不一一介绍了。
我们可以这样使用，类似于webpack的plugin配置：
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from "rollup-plugin-babel";
import {
terser } from 'rollup-plugin-terser';
import {
eslint } from 'rollup-plugin-eslint';
export default [
{
input: 'src/main.js',
output: {
name: 'timeout',
file: '/lib/tool.js',
format: 'umd'
},
plugins: [
resolve(), // 这样 Rollup 能找到 `ms`
commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
eslint(),
babel(),
terser()
]
}
];
其实看起来和webpack差不多，只是在rollup中plugin变成了一个个函数的调用，看起来更加清晰。
3.利用babel来编译es6代码
首先我们先安装babel相关模块：
npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime
然后设置.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": "2.6.10",
"targets": {
"ie": 10
}
}
]
],
"plugins": [
// 解决多个地方使用相同代码导致打包重复的问题
["@babel/plugin-transform-runtime"]
],
"ignore": [
"node_modules/**"
]
}
@babel/preset-env可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。需要注意的是，我们设置"modules": false，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败。
为了解决多个地方使用相同代码导致打包重复的问题，我们需要在.babelrc的plugins里配置@babel/plugin-transform-runtime，同时我们需要修改rollup的配置文件：
babel({
exclude: 'node_modules/**', // 防止打包node_modules下的文件
runtimeHelpers: true, // 使plugin-transform-runtime生效
}),
4. external属性
使用rollup打包，我们在自己的库中需要使用第三方库，例如lodash等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。比如我们使用了lodash，
import _ from 'lodash'
// rollup.config.js
{
input: 'src/main.js',
external: ['lodash'],
globals: {
lodash: '_'
},
output: [
{
file: pkg.main, format: 'cjs' },
{
file: pkg.module, format: 'es' }
]
}
6.导出模式
我们可以将自己的代码导出成commonjs模块，es模块，以及浏览器能识别的模块，通过如下方式设置：
{
input: 'src/main.js',
external: ['ms'],
output: [
{
file: pkg.main, format: 'cjs' },
{
file: pkg.module, format: 'es' },
{
file: pkg.module, format: 'umd' }
]
}
7.发布到npm
你可以通过如下方式配置package.json：
{
"name": "react-view-ui",
"version": "1.0.1",
"description": "ui package",
"main": "dist/tool.cjs.js",
"module": "dist/tool.esm.js",
"browser": "dist/tool.umd.js",
"author": "xin_feng",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"build": "NODE_ENV=production rollup -c",
"dev": "rollup -c -w",
"test": "node test/test.js",
"pretest": "npm run build"
},
"files": [
"dist"
]
}
dist为上传到npm库的指定目录，我们将打包后的dist目录传上去即可。
8.业务中使用
我们可以在实际项目中通过：
yarn add react-view-ui | npm i react-view-ui
来安装UI库，安装完成后，在项目中通过：
//jsx中:
import {
Button, Radio, RadioGroup, Divider, Layout, Slider, Menu, Header, Content, Footer, Pagination } from 'react-view-ui/dist/my-lib-esm';
//App.jsx根目录中引入css样式
import 'react-view-ui/dist/index.css'
我是把之前写的8个组件都试了一下，项目运行界面是这样的：
实际使用方式在文档中有写，可参考：react-view-ui官方文档
import './App.css';
import {
Button, Radio, RadioGroup, Divider, Layout, Slider, Menu, Header, Content, Footer, Pagination } from 'react-view-ui/dist/my-lib-esm'
import {
useEffect } from 'react';
import {
AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import Hello from './component/hello'
function App() {
const options = [10, 20, 30, 50]
const handleClick = () => {
console.log(1)
}
const handleRouteChange = (a) => {
console.log(a)
}
const getItem = (
label,
key,
level,
icon,
children,
) => {
return {
label,
key,
level,
icon,
children,
};
};
const items = [
getItem('Navigation One', 'sub1', 1, null, [
getItem('Option 1', '1', 2),
getItem('Option 2', '2', 2),
getItem('Option 3', '3', 2),
getItem('Option 4', '4', 2),
]),
getItem('Navigation Two', 'sub2', 1, null, [
getItem('Option 5', '5', 2),
getItem('Option 6', '6', 2, null, [
getItem('Option 13', '13', 3),
getItem('Option 14', '14', 3),
]),
getItem('Submenu', 'sub3', 2, null, [
getItem('Option 15', '15', 3),
getItem('Option 16', '16', 3),
]),
]),
getItem('Navigation Three', 'sub4', 1, null, [
getItem('Option 9', '9', 2),
getItem('Option 10', '10', 2),
getItem('Option 11', '11', 2),
getItem('Option 12', '12', 2),
]),
];
return (
<div className="App" style={
{
marginLeft: "20px" }}>
<Button handleClick={
handleClick}>123</Button>
<RadioGroup value={
0} canAddOption boxStyle>
<Radio>Apple</Radio>
<Radio>Orange</Radio>
<Radio>Watch</Radio>
</RadioGroup>
<Layout>
<Header>header</Header>
<Layout>
<Slider row={
3} extraStyle={
{
height: '100%', padding: '0 0 50px 0' }}>
<Menu items={
items} handleRouteChange={
handleRouteChange} defaultOpen />
</Slider>
<Content row={
7}>content</Content>
</Layout>
<Footer>
footer
</Footer>
</Layout>
<Pagination
total={
200}
showSizeChanger
pageSizeOptions={
options}
showJumpInput
/>
<div style={
{
marginTop: "30px" }}>
<Divider>文档分割</Divider>
</div>
</div>
)
}
export default App;
这样以后就可以在项目中使用自己喜欢风格的react组件啦~
- Concis组件库线上链接：http://react-view-ui.com:92
- github：https://github.com/fengxinhhh/Concis
- npm：https://www.npmjs.com/package/concis
