0.1.3 • Published 2 years ago
@haizhi.dev/atom-cli v0.1.3
title: React 自定义组件开发
React 自定义组件开发
atom-cli 自定义脚手架
开发目的
将传统React应用(atom)开发方式通过ClI的方式二次封装,目的主要是为了方便开发和实施人员在做自定义组件开发的时候固定流程的便捷实现原理
通过NodeJs的commander工具,提取出组件应用webpack的 开发环境(development)和 生产环境(production) 的配置,发布到私有仓库后,组件应用就可以通过
直接安装脚手架工具,配置组件应用scripts:yarn add @haizhi.dev/atom-cli
开发的时候就可以直接使用了,webpack拓展可以使用webpack-merge实现拓展"scripts": { "start": "haizhi start", "build": "haizhi build", },
使用方式
- 全局安装 @delivery/atom-cli
yarn add @haizhi.dev/atom-cli
- 命令 create
相当于拉取atom仓库,到项目 然后需要进到目录里面执行yarn 下载依赖,最后使用 yarn start 或者 haizhi start 都可以开启组件应用服务haizhi create
- 命令 start
脚手架自动集成了原本react应用的webpack配置,并且根据数派项目的自定义组件方案,调整了开发环境的打包模式,通过systemJs的方式打包,并且自动将公共依赖提取出来haizhi start
- 命令 build
用于编译组件,将compnents中的组件全部打包出来,放进template目录下,默认一个组件对应一个js,组件名就是文件名。haizhi build
- 参数:
- .option("-a, --analyze", "生成分析报告 默认为 false")
- .option("-c, --config ", "指定config配置文件")
- .option("-ps, --progress", "显示进度 默认为 true")
- 参数:
- 命令 publish
用于发布组件,用于将已经编译的组件上传发布到服务器,这样在数派后台应用组件管理菜单可以直接看到组件,默认组件名和模块名是文件名如上就是 Buttonhaizhi publish -c ./dist/template/Button.js
- 参数:
- .option("-c, --componentPath ","需要上传文件的路径,必须填写,每次上传一个组件")
- .option("-n, --componentName ", "组件名称,没有默认取文件名")
- .option("-m, --moduleName ", "模块名称,没有默认取文件名")
- 参数:
- 全局安装 @delivery/atom-cli