webpack集成

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

通过以下步骤，可以让webpack项目中使用chameleon的任意组件。

• 1 安装npm包 npm i easy-chameleon chameleon-ui-builtin

• 2 执行脚本 node node_modules/\easy-chameleon/bin/index.js，该脚本会执行检测，安装未安装的第三方npm包

• 3 .babelrc 的preset 添加flow, chameleon中用了flow语法，如果需要用到chameleon-api，建议配置babel-plugin-chameleon-import插件实现按需加载。例如：

{
  "presets": [
    "flow",
    ["env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-0"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    [
      "babel-plugin-chameleon-import", {
      "libraryName": "chameleon-api",
      "libraryDirectory": "src/interfaces",
      "libraryFileName": "index.js",
      "defaulLibraryDirectory": "",
      "defaulLibraryFileName": "index.js",
      }
    ]
  ]
}

• 4 入口代码中，引入代码 import 'easy-chameleon/entry/web_global.js';

• 5 修改webpack配置文件,easy-chameleon提供了getConfig方法获取webpack配置，利用webpack-merge将项目原有webpack配置与getConfig方法获取的配置进行合并，例如：

  const merge = require('webpack-merge')
  
  const {getConfig} = require('easy-chameleon');
  
  devWebpackConfig = merge(devWebpackConfig, getConfig({
    cmlType: 'web', 
    media: 'dev', 
    hot: true, 
    disableExtract: false,
    context: path.join(__dirname,'../'),
    cmss: {
      rem: false,
      scale: 0.5
    }
  }))
  

  getConfig方法参数 getConfig(Object object)

  参数	类型	默认值	必填	说明
  cmlType	String		是	端类型，可选值为web|wx|weex
  media	String		是	构建模式，可选值为dev|build
  hot	Boolean	false	否	是否开启热更新，只在web端生效
  disableExtract	Boolean	false	否	不提取css文件
  cmss	Object		否	cmss处理的配置，参见下方cmss对象属性列表
  wxConfig	Object		否	微信端构建配置，参见下方wxConfig对象属性列表

cmss 对象属性列表

wxConfig 对象属性列表

示例

详细示例戳这里webpack集成chameleon