Feature

• 一行命令打包 react 组件库,同时支持 UMD、CJS、ESM 三种规范, 打包方式等同 antd
• 一行命令打包工具库(ts、js)

Install

use npm

npm install @planet-cli --save-dev

or use yarn

yarn add @planet-cli --dev

Usage

planet build [options]   打包编译库
planet --help            查看帮助信息

Options

• --entry
  • CJS 和 ESM 打包入口目录,默认是 src
• --entry-umd
  • UMD 打包入口文件,默认是 src/index.ts
• --mode cjs
  • 打包成 CJS 规范
• --mode esm
  • 打包成 ESM 规范
• --mode umd
  • 打包成 UMD 模式
• --less-to-css
  • 是否将 Less 文件转换为 CSS 文件,默认是true
• --copy-less
  • 是否在打包后生成一份 Less 的源文件,默认是true
• -out-dir-umd
  • 输出 UMD 格式的目录,默认是./dist
• --out-dir-cjs
  • 输出 CJS 格式的目录,默认./lib"
• --out-dir-esm
  • 输出 ESM 格式的目录,默认是./esm

Demo

打包成 ESM 格式

planet build --mode esm

打包成 CJS 格式

planet build --mode cjs

打包成 UMD 格式

planet build --mode umd

需要同时编译 Less 文件, 只需要在命令后加上 --less-to-css 即可(默认开启), CSS 文件的输出目录是 ESM 和 CJS 规范各自的输出目录

planet build --mode esm --less-to-css --copy-less

打包类型文件 -tp 是 tsconfig.json 文件路径

planet build -tp ./tsconfig.json

完整演示

 "scripts": {
    "build:types": "planet build -tp ./tsconfig.json",
    "build:umd": "planet build --mode umd --less-to-css",
    "build:es": "planet build --mode esm --less-to-css --copy-less",
    "build:cjs": "planet build --mode cjs --less-to-css --copy-less",
    "build": "yarn build:umd && yarn build:cjs && yarn build:es && yarn build:types"
  }