• 欢迎大家分享资料!前往留言板评论即可!

umi-library的基本使用

合宙 模组资料网 7个月前 (05-15) 108次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

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

转载请注明原文链接:umi-library的基本使用
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址