avenger-cli

发布于 / 学习

avenger-cli

前言

博客最近一直都没有更新,最近一直都在忙工作和写轮子的事。先说下今天的主角吧。

@osdoc-dev/avenger-cli 低配置式进行二方包新建,调试以及打包等功能

并借着该项目学习了 Github Action相关东西,借助 gh-pages 实现了该项目等官网部署

官网是 [@osdoc-dev/avenger](https://osdoc-dev.github.io/avenger/#/avenger/)

功能

在说功能前,先说几个最近工作上遇到的问题。

最近在某项目中,需要搞一个 React 组件。在项目内去写和调试是完全没问题的。

但是有一天,需要把该组件封装开源出去,这时候发现没有一个脚手架去做这个事情。

再说一个 case,平时自己喜欢搞一些轮子,往往都面临很多重复的动作,比如新建项目,配置Lint

,配置 Rollup 打包。几乎每一个二方包的开发都需要进行上述一些动作。

基于这些需求,在参考了蚂蚁的 umi/father 的基础上,对其进行改造和拓展。参用自己之前没有搞过的 lerna 进行 monorepo 管理

下面主要讲解该脚手架目前支持的功能

  • Basic 二方包项目新建模版
  • React 组件开发模版
  • 基于简单配置的二方包打包方案

下面主要描述下这些功能。当然我们需要先全局安装一下我们的脚手架

yarn global add @osdoc-dev/avenger-cli

Basic 二方包项目新建模版

假如我们需要新建一个二方包项目,我们只需要

avenger create test
ahwgs@ahwgsdeMacBook-Pro test % avenger create test
? 请选择项目模版: basic
? 选择拓展预设配置 (Press <space> to select, <a> to toggle all, <i> to invert? 选择拓展预设配置 Jest, Lerna, CommitLint
 🌀 /Users/ahwgs/Desktop/test/test/.cz-config.js 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/.eslintignore 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/.prettierignore 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/.prettierrc.js 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/commitlint.config.js 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/jest.config.js 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/LICENSE 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/.avengerrc.ts 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/src/index.ts 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/tsconfig.json 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/.eslintrc.js 写入成功!
 🌀 /Users/ahwgs/Desktop/test/test/README.md 写入成功!
 INFO  🌈 初始化package.json...
 INFO  🌈 开始安装开发依赖...!
 INFO  🌈 执行:yarn add  typescript @osdoc-dev/avenger-cli @commitlint/cli @commitlint/config-conventional husky commitizen cz-customizable conventional-changelog-cli @osdoc-dev/eslint-config-preset-prettier lint-staged prettier @osdoc-dev/eslint-config-preset-ts jest ts-jest @types/jest lerna -D
yarn add v1.22.10
...
...
INFO  🌈 开发依赖安装完成
INFO  🌈 检测到启动lerna
lerna notice cli v4.0.0
lerna info Initializing Git repository
lerna info Updating package.json
lerna info Creating lerna.json
lerna info Creating packages directory
lerna success Initialized Lerna files
INFO  🌈 lerna 初始化完成
INFO  🌈 项目初始化成功!
INFO  🌈 请进入项目内进行操作 cd test && yarn install

选择 basic 模版,选择预设配置。然后等待项目初始化成功。

生成的目录结构为

├── .avengerrc.ts
├── .cz-config.js
├── .eslintignore
├── .eslintrc.js
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── commitlint.config.js
├── jest.config.js
├── lerna.json
├── package.json
├── packages
├── src
│   └── index.ts
├── tsconfig.json
└── yarn.lock

src/index.ts 下写我们的代码

进行开发调试

yarn build:w # 生成 /dist 文件夹
cd dist && node index.js

React 组件项目新建模版

新建项目

avenger create --force --template react

生成的目录结构为

.
├── .avengerrc.ts
├── .cz-config.js
├── .eslintignore
├── .eslintrc.js
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── commitlint.config.js
├── example
│   ├── .gitignore
│   ├── index.html
│   ├── index.tsx
│   ├── package.json
│   └── tsconfig.json
├── jest.config.js
├── package.json
├── src
│   └── index.tsx
├── tsconfig.json
└── yarn.lock

src/index.tsx 下写我们的组件

进行开发调试

首先需求在主项目进行编译

yarn build:w # 生成 /dist 文件夹

然后进入 example 文件夹下

# 安装依赖
yarn 
# 启动预览页面
yarn start

打包任意项目

对于非模版新建的项目,但是又有打包的需求。

我们仍需要安装我们的脚手架,如果全局安装过则可以忽略

yarn add @osdoc-dev/avenger-cli -D

我们可以在项目根目录下新建 .avengerrc.ts 文件。如果项目不是 typescript项目则新建 .avengerrc.js

当然,如果你非得新建成 .avenger.config.ts .avenger.config.js 这也是可以的,因为我偷偷的支持了

配置文件语法支持 esmcommonjs ,如

export default {}

或者

module.exports = {}

当然,我们还可以这样做

import { defineConfig } from '@osdoc-dev/avenger-cli'

export default defineConfig({
  esm: 'rollup',
  cjs: 'rollup',
  cssModule: true,
})

image-20210528235653705

脚手架默认导出了类型辅助函数,我们可以不用盲目的进行配置了

假如我们需要将写的代码打包成 esmcjs 我们可以这样写配置

import { defineConfig } from '@osdoc-dev/avenger-cli'

export default defineConfig({
  esm: 'rollup',
  cjs: 'rollup',
})

然后执行如下命令

yarn build > avenger build

我们可以看到输出了一个dist文件夹。

image-20210528235653705

一般来说我们打包进行如上简单的配置就可以了,但是我们想更自定义一些操作的话,脚手架还拓展了十分丰富的配置给用户。具体所有配置可看官网

https://osdoc-dev.github.io/avenger/#/avenger/config

成就

最近实在是太忙了,但也收获到很多,从这个项目学到了很多,比如:

  • rollup 配置
  • Babel 配置
  • Learn 管理多包
  • GitHub action + gh-pages + dumi 完成文档部署
  • 当然最大的成就是完成了需求,方便了自己

到目前为止,脚手架以及服务了10+项目打包开发。

如:https://github.com/ahwgs/vite-plugin-html-config 项目

收获还是很多的,当然 bug 也很多,版本迭代也很快

其他

非常欢迎大家使用该脚手架助力开发,也非常欢迎大家给项目 点个小小的 star

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/avenger-cli.html