# webpack 集成 CML

注:内部 webpack 插件版本基于 webpack@3.12.0 开发选择,暂不兼容 webpack4。

# 背景介绍

在 webpack 项目中使用 chamelon 组件有两种方式,一种是将组件导出到项目中进行使用,而另一种是直接在 webpack 项目中集成 CML 为其增加 CML 的编译能力,集成后可直接使用 chamelon 的语法进行开发。本文将一步一步介绍如何集成 CML 及使用已有 CML 组件和开发 CML 组件。

# 项目初始化

首先需要初始化一个 webpack 项目,这里直接使用 vue-cli,初始化项目如下图:

# 集成 CML

# 第一步:在 webpack 项目下执行npm i easy-chameleon chameleon-ui-builtin命&令,安装集成依赖。

# 第二步:执行node node_modules/\easy-chameleon/bin/index.js命令,安装 CML 依赖。

# 第三步:修改.babelrc 文件,为 preset 添加 flow,在 CML 中使用了 flow 语法,下图是修改前后对比:

# 第四步:在入口文件中引入easy-chameleon/entry/web_global.js文件,代码如下:

import 'easy-chameleon/entry/web_global.js';
import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

# 第五步:修改 webpack 配置文件,增加 CML 编译能力。

修改 webpack.base.conf.js 文件,代码如下:

const { getConfig } = require('easy-chameleon');
const merge = require('webpack-merge');

module.exports = merge(
  baseConfig,
  getConfig({
    cmlType: 'web',
    media: 'dev',
    hot: true,
    disableExtract: false,
    context: path.join(__dirname, '../'),
    cmss: {
      rem: false,
      scale: 0.5,
    },
  }),
);

这里只贴出了该文件中所增加的代码,其中 baseConfig 为 webpack 原有配置。至此,webpack 项目已成功集成 CML

# 使用已有 CML 组件

我们已经使用 CML 开发出一套 UI 组件库,这里我们直接在 webpack 中使用。

首先,执行npm install cml-ui 命令安装 cml-ui 组件库,安装成功后我们直接在 app.vue 中使用,代码如下:

<template>
  <div id="app">
    <img src="./images/logo.png" />
    <HelloWorld />
    <CDialog :mask="true" :show="true" title="title" content="content"></CDialog>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import CDialog from 'cml-ui/components/c-dialog/c-dialog';

export default {
  name: 'App',
  components: {
    HelloWorld,
    CDialog,
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最终效果如下图:

# 开发 CML 组件

在组件目录下新建.cml文件,CML 组件模版如下:

<template> </template>

<script>
class CML {
  data = {};

  computed = {};

  watch = {};

  methods = {};

  beforeCreate() {}

  created() {}

  beforeMount() {}

  mounted() {}

  beforeDestroy() {}

  destroyed() {}
}

export default new Chameleon();
</script>

<style scoped></style>

<script cml-type="json">
{
  "base": {
    "usingComponents": {
    }
  }
}
</script>

我在项目中新建了一个HelloChamelon.cml组件,开发完成后在App.vue中引入使用,代码如下:

<template>
  <div id="app">
    <img src="./images/logo.png" />
    <hello-cml />
  </div>
</template>

<script>
import HelloCML from './components/HelloCML';

export default {
  name: 'App',
  components: {
    HelloCML,
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最终效果如下图:

#  注意

在 CML 组件开发中  样式单位为 cpx,编译时默认会转为 rem, 具体单位转换规则参考项目配置中的 CMSS 处理。