# 组件开发流程

### 一、安装xupd-cli

+ 安装

  ```shell
   npm install xupd-cli -g
  ```

+ 更新

  ```shell
  npm update xupd-cli -g
  ```

### 二、功能说明

+ 初始化组件项目
+ 组件发布至私有npm源
  + 自动切换npm源，不影响本地配置的npm源
  + 自动登录npm私有源
  + 自动编译，校验js 
  + 自动发布组件

使用该脚手架工具，开发组件，开发者无需进行各种复杂的配置，仅关注组件本身功能的开发，有效提升开发效率。

脚手架提供了常用桥接通信示例，方便快速开发桥接接口。

### 三、开发流程

![](./Image/commonds/0.png)

### 四、开发步骤

#### 1、初试化项目

+ 打开终端输入如下命令 （TestModule为自定义项目名称,注意请勿使用 src，example等关键字作为项目名称）

```shell
xupd npminit TestModule
```

+ 文件目录结构如下

  ![](./Image/commonds/1.png)

  + android   安卓原生功能桥接，如果未使用到混合开发，则无需关系
  + babel.config.js js  ES5, ES6语法转换配置
  + example 开发组件使用的预览，调试项目
  + ios  iOS原生功能桥接文件，如果未使用到混合开发，则无需关系
  + lib  js代码 编译之后产生的文件，主要供发布后其它页面依赖使用
  + package.json 各种js库配置文件
  + README.md 各种文档说明，强烈要求阅读ß
  + src js端功能开发文件
  + TestModule.podspec  如果是桥接组件，则ios项目中需要使用的依赖配置

#### 2、开发组件

+ 混合组件开发

  + iOS端

    + 打开iOS项目工程  example/ios/TestModuleExample.xcworkspace

    + 打开Pods->TestModule.swift 定义一个接口函数

      ```swift
          @objc(nativeNormalMethod)
          func nativeNormalMethod() {
              DispatchQueue.main.async {
                  UIApplication.shared.delegate?.window??.makeToast("调用了Native方法")
              }
          }
      ```

    + 打开Pods->TestModule.m 文件声明桥接接口

      ```swift
      /**
       * 直接调用原生方法
       */
      RCT_EXTERN_METHOD(nativeNormalMethod)
      ```

  + 安卓端

    + 打开 android/src/main/java/com/testmodule/TestModuleModule.kt

      ```java
        /**
         * 直接调用原生方法
         */
        @ReactMethod
        fun nativeNormalMethod() {
          Toast.makeText(reactContext, "调用了Native方法", Toast.LENGTH_SHORT).show()
        }
      ```

  + web端

    + 打开example/src/App.tsx

    + 导入桥接模块

      ```jsx
      import TestModule from '@xupd-design/TestModule';
      ```

    + 调用原生公开的桥接接口

      ```js
      TestModule.nativeNormalMethod();
      ```

  最后终端 cd到 example 文件目录，执行 yarn android 或者yarn ios 即能在模拟器中预览效果

  + android 效果

    ![](./Image/Commonds/2.png)

  + ios 效果

    ![](./Image/commonds/3.png)

  

+ 纯JS组件开发

  + 打开 src/index.tsx
  + 进行js功能开发

### 三、发布

+ git 管理  发布之前需要先提交，否则将报错
  + git add ./
  + git commit -m "日志"     该步骤将进行 js 校验，如有错误请先修正相关错误

+ 发布组件

  ```shell
  xupd npmpub
  ```

  + 发布完之后组件名称为 @xupd-design/组件名称 
  + 组件版本将基于当前package.json版本号自动更新

### 四、组件使用

+ 打开需要使用改组件的项目

+ 打开该项目的package.json

  ```json
  "dependencies": {
  		"@xupd-design/TestModule": "0.0.1"
  		}
  ```

+ 打开 项目文件中的 App.js

+ 导入组件

  ```js
  import TestModule from '@xupd-design/TestModule';
  ```

+ 功能调用

  ```js
  TestModule.nativeNormalMethod();
  ```

  

### 五、npm 其它常用命令功能封装

+ xupd npm 、xupd npm -t vv 切换npm源为微微私有源
+ xupd npm -t org 切换npm源为官方源
+ xupd npm -t tb 切换npm源为淘宝源