umi-library的基本使用

umi-library

链接

官网地址

介绍

可以使用umi-library将自己的组件打包成各种类型的包,同时支持生成在线文档

打包方式说明

打包文件格式说明

基本使用

安装

1
npm i umi-library

配置

新建.umirc.library.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
export default {
entry: 'src/index.js', // 默认入口位置。可以不配置
esm: {
type:'babel', // 或者type:rollup
file: 'name', // 指定 esm 的输出文件名。
mjs: true, // 是否同时输出一份给浏览器用的 esm,以 .mjs 为后缀。
// mjs 目前不通用,除非你知道这是什么,否则不要配置。
minify:true , // 压缩格式
},
cjs: 'babel', // 也支持如上面esm一样的配置,这是简写
umd:{
globals:{ // 指定rollup的golbals配置

},
name:'' // 指定rollup的name配置
minFile:true, // 指定生成压缩版本
file:''// 指定umd的文件输出名
},
autoprefixer{ // 配置参数传给 autoprefixer,详见 autoprefixer#options,常用的有 flexbox 和 browsers。
browsers: [
'ie>8',
'Safari >= 6',
],
},
extraBabelPlugins:[ // 额外的babel plugin
['babel-plugin-import', { // 例如配置按需加载antd
libraryName:'antd',
libraryDirectory:'es',
style:true
}]
]
}

文档相关配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
doc: { //文档相关配置
themeConfig: { mode: 'dark' } },
htmlContext: { // 扩展 html 模板。
head: {
favicon: '',
meta: [],
links: [
{ rel: 'stylesheet', href: 'foo.css' },
],
scripts: [
{ src: 'bar.js' },
],
},
body: {
scripts: [
{ src: 'hoo.js' },
],
},
},
}

使用命令

上次更新 2021-01-28