@wont/tools

tools

Tools to Build library for vue2、vue3、react<17、utils，using gulp、babel、rollup

Usage

install

npm i @wont/tools -D

compile library

wont-tools compile <frame> [option]
wont-tools compile vue3 -d antd
wont-tools compile react16 -r

frame	-d/--depends	antd	-e/--entry dirname	-r/--rollup
vue	✅	✅	✅	✅
react16	✅	❌	✅	✅
utils	❌	❌	✅	❌

frame 必填

frame 可选为 'vue2', 'vue3', 'react16', 'utils', 目前仅支持 vue3, react16

options 可选项

以下可选项-r与-d antd不可组合使用，其他可以任意组合

-d/--depends antd

编译组件库依赖于某个组件库，目前vue3使用eslint-plugin-import集成了ant-design-vue

wont-tools compile vue3 -d antd
# or
wont-tools compile vue3 -depends antd

-e/--entry dirname

指定组件库文件名，默认为components

wont-tools compile vue3 -e src
# or
wont-tools compile vue3 -entry src

-r/--rollup

使用rollup编译javascript 注意 使用rollup编译的组件库，组件未引入样式文件，要使用babel-plugin-component引入，支持less变量定制主题

wont-tools compile vue3 -r
# or
wont-tools compile vue3 --rollup

Test case

@wont/react-ui @wont/utils

TODO

• [X] vue3+tsx ui library
• [ ] vue2 ui library, is it still necessary?
• [X] react<17 ui library
• [ ] rollup compile, less files output plugin
• [X] utils ui library
• [ ] npm version command
• [ ] tag command
• [ ] lint command
• [ ] prettier command
• [ ] create command
• [ ] changelog command
• [ ] docs command

目录示范与生成产物

utils

目录结构

• 打包规则./${ENTRY_DIR_NAME}/!(_)*/!(_)*.ts
• 根据以上规则生成index.ts作为入口文件

── src
│   ├── _common
│   │   ├── const.ts
│   ├── compose
│   │   ├── _compose.test.ts
│   │   └── compose.ts
│   ├── index.ts

执行指令

wont-tools compile utils -e src

生成产物

# esm
├── es
│   ├── compose
│   │   ├── compose.d.ts
│   │   └── index.js
│   ├── index.d.ts
│   ├── index.js
# commonjs
├── lib
│   ├── compose
│   │   ├── compose.d.ts
│   │   └── index.js
│   ├── index.d.ts
│   ├── index.js
# umd
├── dist
│   ├── umd.min.js

ui components

目录结构

• 打包规则./${ENTRY_DIR_NAME}/**/index.tsx
• 根据以上规则生成index.tsx作为入口文件

├── components
│   ├── button
│   │   ├── __tests__
│   │   │   ├── __snapshots__
│   │   │   └── button.test.tsx
│   │   ├── index.less
│   │   ├── index.stories.tsx
│   │   └── index.tsx
│   ├── index.tsx

执行指令

wont-tools compile react

生成产物

# esm
├── es
│   ├── button
│   │   ├── index.css
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   └── index.less
│   ├── index.d.ts
│   ├── index.js

# commonjs
├── lib
│   ├── button
│   │   ├── index.css
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   └── index.less
│   ├── index.d.ts
│   ├── index.js