自定义库快速启动你的antd-design项目(一)

380 阅读1分钟

一些废话

一般我们遇到一些类似于没有设计图的需求,需要按照antd-design快速构建项目,我们一般主要会基于以下两种方式构建:

  • 自定义webpack
    • 优点 : 自定义程度高(高可配)
    • 缺点 : 学习成本高(虽然社区解决方案、文章都很多,但是在有限的开发周期花时间在学习构建工具上可能会顾此失彼)
  • create-react-app
    • 优点 : 快速启动创建项目
    • 缺点 : 自定义程度低(如果要修改一下webpack的配置,临时去node_modules修改后,再次安装node_module就会覆盖之前的配置,eject可以解决这个问题)

但是我们真的不想每次重复的去初始化我们的代码!!!😂

于是

于是我想基于npm发布一个自己的脚手架,这样每次就不需要再为了初始化项目而浪费时间。(每次都初始化项目难度不大,但是呢浪费时间就是在浪费生命,SO)

思路

构建部分:

  • 用create-react-app + eject 将配置提取出来,基于已有的webpack配置项后续自定义webpack配置
  • 提取package.json里面的babel配置
  • 安装babel-plugin-import插件,缩小antd-component的打包体积 业务部分:
  • 基于 react-router-dom 增加通用登陆/验证模块 发布部分
  • 自定义一个可交互的命令行工具
  • 根据用户选择如 js || ts,css || less之类的。。。
  • 发布到npmjs 测试部分
  • 安装全局的库
npm install -g antd-start
  • 运行调试
antd-start init mydemo

写在最后

思路已经有了,后续开工。