组件导出

这里介绍的是第二种场景，将 CML 组件导出到某个端使用。

介绍

为了让开发者更自由地使用Chameleon，我们提供组件导出的形式，让开发者可以在任意端原有项目中使用通过Chameleon开发的组件。我们用web端和小程序端举例，按正常开发模式我们需要分别维护着4套代码（web、wx、alipay、baidu），在某一个业务场景下需要开发一个时间选择器的组件，原有模式下我们需要每个端独自开发，而对于这种公共的组件，就可以选择使用Chameleon去维护，通过Chameleon开发，只需要维护一套组件代码，最后通过组件导出就可以在各个端进行使用了。这样的模式完全利用了Chameleon的跨端优势，大大降低了代码开发维护成本。

组件导出开发模式：组件导出应用 - 图1

命令行

  • cml web export 执行web端组件导出
  • cml weex export 执行weex端组件导出
  • cml wx export 执行wx端组件导出
  • cml alipay export 执行alipay端组件导出
  • cml baidu export 执行baidu端组件导出

配置

在chameleon.config.js中增加export配置，即可自定义组件导出配置,可配置项参考下表：

配置项类型说明
entryArray组件导出的入口目录，项目根目录的相对路径
outputPathString组件导出目录，绝对路径
publicPathString公共资源地址
hashBoolean导出文件名是否带hash，默认true
minimizeBoolean导出文件名是否压缩，默认true
disableExtractBoolean不拆分css，默认false

导出组件

chameleon组件导出目录结构如下：

  1. ├── dist
  2. |   ├── export
  3. │   │   ├── platform (web、weex、wx、alipay、baidu ...)
  4. │   │   │   ├── common
  5. |   │   │   │   ├── web_global.js [仅导出web端组件时存在，需要在入口文件中引用]
  6. |   │   │   │   ├── web_global.css [会在web_global.js中引用]
  7. │   │   │   ├── 组件目录
  8. │   │   │   └── 资源目录

下面是在webpack+vue环境下引用chameleon导出组件的示例：

假设目前已经通过chameleon项目导出了c-header组件，将组件移动到webpack+vue的环境后，需要进行一下几步操作：

  • 假设是web端组件，则首先需要在入口文件中引用web_global.js
  • 在需要使用组件的地方引用组件即可

Bug&Tips

  • .babelrc配置中去掉module: false
  • 由于生产模式组件为编译后的模块，所以尽量使用线上资源

示例

详细示例戳这里普通项目使用跨端组件