手把手教你系列 - webpack集成chameleon

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

背景介绍

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

项目初始化

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

集成chameleon

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

第二步：执行node node_modules/\easy-chameleon/bin/index.js命令，安装chameleon依赖。

第三步：修改.babelrc文件，为preset添加flow，在chameleon中使用了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配置文件，增加chameleon编译能力。

修改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项目已成功集成chameleon。

使用已有chameleon组件

我们已经使用chameleon开发出一套ui组件库，这里我们直接在webpack中使用。

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

<template>
  <div id="app">
    <img src="./assets/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>

最终效果如下图：

开发chameleon组件

在组件目录下新建.cml文件，chameleon组件模版如下：

<template>
</template>

<script>
class Chameleon {

  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="./assets/logo.png">
    <hello-chameleon />
  </div>
</template>

<script>
import HelloChameleon from './components/HelloChameleon'

export default {
  name: 'App',
  components: {
    HelloChameleon
  }
}
</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>

最终效果如下图：

注意

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