umi-library

链接

官网地址

介绍

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

打包方式说明

• babel方式打包 将按照源代码的文件目录进行打包

• 默认为rollup方式(将文件合并成一个)

打包文件格式说明

• esm：es6语法格式(也叫AMD)，主要用在浏览器中 export default …；可以做 tree-shaking(打包成一个文件，但是项目中使用时只引入需要的那一部分)
• cjs： es5的语法(也叫CommonJS)，目前主要给node用； module.exports=…
• umd：兼容esm和cjs，先判断是否支持node模块module.exports

基本使用

安装

npm i umi-library

配置

新建.umirc.library.js文件

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
      }]
  ]
}

文档相关配置

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' },
        ],
      },
    },
}

使用命令

• 打包： umi-library build
• 打包简写： umi-lib build
• 运行文档：umi-lib doc dev
• 打包文档：umi-lib doc build