• 1. 安装 ewtool 脚手架
  • 2. 创建组件
  • 3. 开发组件
  • 4. 组件线上调试
  • 5. 发布组件
    • 5.1 命令发布
    • 5.2 网页发布
  • 6. 组件版本升级
    • 6.1 命令升级
    • 6.2 网页升级
  • 7. 组件定向场景测试
  • 其他注意事项

    1. 安装 ewtool 脚手架

    打开终端 (windows下可以打开 cmd 窗口 或 PowerShell 窗口) 运行下面的命令, 请先确认电脑上已经安装了 node:

    1. npm install ewtool -g --registry=https://registry.npm.taobao.org

    安装好后可以运行 ewtool -h 查看 ewtool 支持的命令。

    2. 创建组件

    假设要创建的组件名叫 mycomponent, 打开终端, 运行下面的命令:

    1. mkdir mycomponent 
    2. cd mycomponent 
    3. ewtool init 
    4. npm install --registry=https://registry.npm.taobao.org

    生成的目录结构如下。

    1. mycomponent
    2.   illustration           ---- 可以在这个文件夹先放图片, 第一次发布时会作为组件插图一起发布
    3.   node_modules
    4.   preview
    5.   src
    6.     configurator         ---- 组件配置器相关代码
    7.       i18n
    8.         locale.zh-cn.js  ---- 文件名格式: locale.xxx.js, xxx 就是要支持的语言
    9.         locale.en.js
    10.     lib
    11.     widget               ---- 组件代码
    12.       i18n
    13.   .babelrc
    14.   .gitignore
    15.   .npmignore
    16.   package-lock.json
    17.   package.json
    18.   README.md               ---- 可以将组件文档写到这里面
    19.   webpack.config.js

    开发阶段一般只需关心 src/configurator 和 src/widget 这两个目录, 他们分别对应组件的配置页面和预览页面。

    3. 开发组件

    在 mycomponent 目录下运行:

    1. npm start // 会打开组件的配置页面

    参考 快速上手 和 接口详解, 开发 src/configurator 和 src/widget 下对应的文件。

    4. 组件线上调试

    当本地组件开发完毕时, 可以自己去工作台创建一个 demo 项目来测试组件, 具体方法如下:

    • 通过运行 npm start 来启动本地组件(确保组件运行在 8001 端口)。
    • 在您自己的测试页面 添加一个窗口, 在这个窗口里去选择 alternative 这个组件然后保存。
    • 由于线上工作台是https的, 不能直接加载本地的 http 资源, 这时浏览器地址栏的右边 会出现带红色小叉的盾牌图标, 点击这个图标 然后点击 加载不安全的脚本。ewtool 文档 - 图1
    当调试完成并发布组件后, 您还可以把之前 demo 页面上的 alternative 组件直接替换成您发布的组件(右击 alternative 窗口就能看到替换组件按钮)。

    5. 发布组件

    组件有两种发布方式: 在终端上用命令发布 和 到 Enhancer 平台上通过网页发布。

    在第一次发布时, 如果有组件的示例图片, 可以将图片放在 mycomponent/illustration 里, 最多 6 张图片任何发布的单个文件大小不能超过 1 M。

    5.1 命令发布

    在 mycomponent 目录下运行:

    1. ewtool login // 使用在 Enhancer 平台上注册的账号密码进行登陆, 如已登陆请忽略这一步 
    2. ewtool release

    5.2 网页发布

    在 mycomponent 目录下运行:

    1. ewtool pack
    pack 命令会在 mycomponent 目录下生成 release 目录, 并且把打包好的 mycomponent.xxxx.all.zip 文件放到这里面。

    用浏览器打开 https://developer.enhancer.io/myWidgets, 点击 添加第一个组件, 在组件添加页面 填写组件相关内容 然后提交组件。

    6. 组件版本升级

    组件版本同样可以通过 命令行方式 和 网页方式 进行升级, 可以单独升级 configurator 或 widget, 也可以同时升级它们。 同时升级的步骤和上面的 发布组件的步骤基本一致, 下面看一下单独升级:

    6.1 命令升级

    在 mycomponent 目录下运行:

    1. ewtool release config // 单独升级 configurator 
    2. ewtool release widget // 单独升级 widget

    6.2 网页升级

    在 mycomponent 目录下运行:

    1. ewtool pack config // 单独升级 configurator, 会在 mycomponent/release 下生成 mycomponent.xxxx.config.zip 
    2. ewtool pack widget // 单独升级 widget, 会在 mycomponent/release 下生成 mycomponent.xxxx.widget.zip

    用浏览器打开 https://developer.enhancer.io/myWidgets, 找到之前发布的组件, 然后点击 配置器版本 或 组件版本, 然后点击新增版本进行升级。

    7. 组件定向场景测试

    组件开发完成时, 可以通过配置定向场景来测试组件的 api 是否正常运行。

    其他注意事项

    • 当在发布或升级组件时都会遇到选择组件版本, ewtool 根据 package.json 里的 version 和 configuratorVersion 按照 semver 生成三个版本选项, 您可以根据 语义化版本 的要求选择对应的版本。
    • 每次运行 ewtool pack 后, ewtool 就会修改 package.json 里的 version 或 configuratorVersion，如果您发现您需要重新运行 ewtool pack, 那么您需要先将 package.json 对应的版本号改回之前的版本。
    • 如果您的组件依赖了其他第三方组件, 并且这个第三方组件需要和组件一起发布, 也就是说这些资源不需要经过 webpack 打包, 请将这个第三方组件放在 src 目录下, 然后在 copy.js 里按照注释语句的格式将第三方组件从 src 目录 复制到 build 目录, 然后运行 ewtool copy。