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 预设
  • 配置 prettiereslint, 规范代码提交
  • 配置 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👏.