title: React 自定义组件开发

React 自定义组件开发

• atom-cli 自定义脚手架

  • 开发目的

    将传统React应用（atom）开发方式通过ClI的方式二次封装，目的主要是为了方便开发和实施人员在做自定义组件开发的时候固定流程的便捷

  • 实现原理

    通过NodeJs的commander工具，提取出组件应用webpack的 开发环境（development）和 生产环境（production） 的配置，发布到私有仓库后，组件应用就可以通过

    yarn add @haizhi.dev/atom-cli

    直接安装脚手架工具，配置组件应用scripts：

      "scripts": {
          "start": "haizhi start",
          "build": "haizhi build",
      },

    开发的时候就可以直接使用了，webpack拓展可以使用webpack-merge实现拓展

  • 使用方式

    • 全局安装 @delivery/atom-cli

    yarn add @haizhi.dev/atom-cli

    • 命令 create

      haizhi create 

      相当于拉取atom仓库，到项目 然后需要进到目录里面执行yarn 下载依赖，最后使用 yarn start 或者 haizhi start 都可以开启组件应用服务
    • 命令 start

      haizhi start

      脚手架自动集成了原本react应用的webpack配置，并且根据数派项目的自定义组件方案，调整了开发环境的打包模式，通过systemJs的方式打包，并且自动将公共依赖提取出来
    • 命令 build

      haizhi build

      用于编译组件，将compnents中的组件全部打包出来，放进template目录下，默认一个组件对应一个js，组件名就是文件名。
      • 参数：
        • .option("-a, --analyze", "生成分析报告 默认为 false")
        • .option("-c, --config ", "指定config配置文件")
        • .option("-ps, --progress", "显示进度 默认为 true")
    • 命令 publish

      haizhi publish -c ./dist/template/Button.js

      用于发布组件，用于将已经编译的组件上传发布到服务器，这样在数派后台应用组件管理菜单可以直接看到组件，默认组件名和模块名是文件名如上就是 Button
      • 参数:
        • .option("-c, --componentPath ","需要上传文件的路径，必须填写，每次上传一个组件")
        • .option("-n, --componentName ", "组件名称，没有默认取文件名")
        • .option("-m, --moduleName ", "模块名称，没有默认取文件名")

• atom 组件应用

  • 开发目的

    统一管理自定义React组件，结合cli的打包方案，可以快速生成应用，并且上传到数派应用组件管理功能内

  • 公共依赖

    antd react react-dom

  • 例子

    使用react+typescrip的方式开发，正常使用引入antd组件，在组件打包之后，会把对应的依赖分离出来，如果安装了其他的依赖，会根据system模块化打包方案，将第三方依赖打包进去

  • 打包后的文件

    

  • 上传至组件仓库

    之后根据脚手架工具上传组件即可，当然也可以直接通过数派后台客户端，手动上传js文件，这里只需要选择react组件就可以上传