BlogAbout
Published on

开发了一个cli: @twotwoba/mk-app-cli

Authors

缘起

继上次有趣的 bug 之后, 我就一直在想把项目的整体架构变一变, 之前是基于 webpack 的 react 脚手架, 体验过 vite 的快感让我一直心心念念于它. 再就是项目中数据管理使用的是 Rematch 这个库, 一开始用着还挺舒服的, 但是自从使用过 zustand 后, 我又移情别恋了~

于是乎我就在想, 不如自己打造一个用起来顺手的模板吧💣

站在巨人的肩膀上

# 使用了官网提供的最基础的模板
pnpm create vite my-vue-app --template react-ts

下面是具体做的工作:

  • 配置 preset.css, 最简单的 css 预设
  • 配置 prettier 和 eslint, 规范代码提交
  • 配置 tailwindcss, 在settings.json中添加 tailwindCSS.experimental.classRegex, 使得在变量中也能给出 tailwindcss 提示
  • 配置 zustand, 进行状态管理, 内置了 loading 处理 store 和函数(启发于 Rematch 的 loading 插件).
    import till from '@/utils' // 把 await-to-js 搬运到项目中了, 因为我觉得 till 与这个方法的作用更匹配
import { create } from 'zustand'

type State = {
    loading: boolean
}
type Action = {
    setLoading: (loading?: boolean) => void
}
const useLoading = create<State & Action>((set, get) => ({
    loading: false,
    setLoading: loading => {
        set({ loading: typeof loading === 'boolean' ? loading : !get().loading })
    }
}))

// 调用接口时使用, withLoading(xxxApi)(...params)
export const withLoading = <T extends (...args: any[]) => Promise<any>>(asyncFunction: T) => {
    const setLoading = useLoading.getState().setLoading
    return async (...args: Parameters<T>): Promise<ReturnType<T> | undefined> => {
        setLoading(true)
        const [err, res] = await till(asyncFunction(...args))
        setLoading(false)
        if (err) {
            console.error(err)
            return
        }
        return res
    }
}

export default useLoading // 页面中使用

开发 cli

写一个 cli 的文章太多了, 咱就不赘述了. 介绍一下技术选型吧: commander + @inquirer/prompts + chalk + ora + shelljs + figlet.

结合上面自己配置的模板, 很容就把脚手架写出来, 具体请移步: mk-app-cli github.

因为之前项目是用的 qiankun 来做微前端的, 但是我看 vite-plugin-qiankun 已经很久没更新了, 上一次更新还是 2 年前, 因此我又考察了其他方案. 其中 JD 的 Micro-app 借鉴 WebComponent 的思想, 配置非常简单, 而且对 Vite 支持友好, 于是顺其自然的 Micro-app 成为了绝佳候选. 在 cli 中集成时分为了主应用和子应用, 使得创造微前端项目更加简单.

安装使用

npm i @twotwoba/mk-app-cli

mk web <project name>

欢迎各路大佬提 issues 和 pr👏.

View on GitHub