配置

針對(duì)項(xiàng)目、組件、路由等的特定配置，以滿足各種方式的需求。

組件配置

組件基礎(chǔ)配置及各端差異配置，包括組件引入等。

組件的配置以 json 對(duì)象的格式配置在.cml 文件中，結(jié)構(gòu)如下：

<script cml-type="json">
{
  "base":{
    "usingComponents": {
      "navi": "/components/navi/navi",
      "c-cell": "/components/c-cell/c-cell",
      "c-list": "/components/c-list/c-list",
      "navi-npm": "cml-test-ui/navi/navi"
    }
  },
  "wx": {
  },
  "alipay": {
  },
  "baidu": {
  },
  "web": {
  },
  "weex": {
  }
}
</script>

• base 對(duì)象為各端共用的配置對(duì)象。
• wx、web、weex 分別對(duì)應(yīng)三端特有的配置對(duì)象，base 的配置會(huì)應(yīng)用到每一端的配置，內(nèi)部做的 merge。
• usingComponents字段是目前最重要的配置，各端都會(huì)使用，小程序規(guī)定頁面的 json 文件中配置使用到的組件。web 和 Weex 端的構(gòu)建時(shí)也是根據(jù)該字段去找到相應(yīng)的組件進(jìn)行自動(dòng)化的注冊(cè)。所以用到組件必須進(jìn)行配置
• usingComponents中組件的引用地址。支持引用 src 和 node_modules 下的組件，地址禁止包含后綴擴(kuò)展名：src 下可以寫相對(duì)路徑，也可以寫相對(duì)于 src 的絕對(duì)路徑，例如/components/**,node_modules 下的組件，不需要寫 node_modules，直接從 npm 的包名稱開始寫例如cml-test-ui/navi/navi。引用的組件類型支持：.cml 擴(kuò)展名跨端組件.vue 擴(kuò)展名的 vue、weex 組件，僅在多態(tài)組件可用小程序組件文件夾路徑，僅在多態(tài)組件可用.js 擴(kuò)展名的 react 組件，僅在多態(tài)組件可用
• 小程序端所需要的一些配置，寫在各自的特有配置對(duì)象中

路由配置

項(xiàng)目統(tǒng)一路由配置，CML 項(xiàng)目?jī)?nèi)置了一套各端統(tǒng)一的路由配置方式。

路由配置文件

src/router.config.json是路由的配置文件,內(nèi)容如下：

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes":[
    {
      "url": "/cml/h5/index",
      "path": "/pages/index/index",
      "mock": "index.php"
    }
  ]
}

• mode 為 Web 端路由模式，分為hash或history。
• domain，當(dāng) mode 為 hash 時(shí) domain 為 Web 端頁面的最終訪問地址，當(dāng) mode 為 history 時(shí)，domain 為 Web 端頁面的域名。
• routes 為路由配置path 為路由對(duì)應(yīng)的 cml 文件的路徑,以 src 目錄下開始的絕對(duì)路徑，以/開頭。url,當(dāng) mode 為 hash 時(shí) url 為 Web 端頁面地址對(duì)應(yīng)的 hash，當(dāng) mode 為 history 時(shí)，url 為 Web 端頁面的路徑。mock 為該路由對(duì)應(yīng)的 Mock 文件(僅模擬模板下發(fā)需要)
• 小程序端，構(gòu)建時(shí)會(huì)將router.config.json的內(nèi)容，插入到 app.json 的 pages 字段，實(shí)現(xiàn)小程序端的路由。
• 注: router.config.json中的 domain 指定頁面最終線上地址，只是用于 config.json 的生成,真正決定 web 頁面訪問地址的還是取決于 web 服務(wù)器的配置。

注：apiPrefix、publicPath、router.config.json、cmlUrl 的關(guān)系

各平臺(tái)按需配置

chameleon-tool@1.0.6-alpha.1版本支持了路由按需配置，即開發(fā)者可以根據(jù)平臺(tái)自定義配置某個(gè)路由在哪個(gè)端顯示

• usedPlatforms:['web','weex','wx','baidu','alipay','tt','qq']

默認(rèn)情況下路由會(huì)在所有端顯示，當(dāng)配置了該字段的時(shí)候，僅在配置端生效 比如下面的配置

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes":[
    {
      "url": "/cml/h5/index",
      "path": "/pages/index/index",
      "name": "首頁",
      "mock": "index.php",
      "usedPlatforms":["web","wx"]
    },
    {
      "url": "/cml/h5/index1",
      "path": "/pages/index/index1",
      "name": "首頁",
      "mock": "index.php",
      "usedPlatforms":["web"]
    },
    {
      "url": "/cml/h5/index2",
      "path": "/pages/index/index2",
      "name": "首頁",
      "mock": "index.php",
      "usedPlatforms":["wx"]
    },
    {
      "url": "/cml/h5/index3",
      "path": "/pages/index/index3",
      "name": "首頁",
      "mock": "index.php",
      "usedPlatforms":["weex"]
    }
  ]
}

使用路由場(chǎng)景

• 應(yīng)用內(nèi)路由
• 跨應(yīng)用路由

項(xiàng)目配置

不同端、不同模式的差異化構(gòu)建配置。

本文檔描述了項(xiàng)目配置的全部參數(shù)及使用方法。

配置一覽表

項(xiàng)目全局配置

平臺(tái)內(nèi)構(gòu)建配置

平臺(tái)內(nèi)構(gòu)建配置是針對(duì)某一端執(zhí)行命令構(gòu)建時(shí)的特殊配置。

配置文件

CML 的構(gòu)建過程是配置化的，項(xiàng)目的根目錄下提供一個(gè) chameleon.config.js 文件，在該文件中可以使用全局對(duì)象 CML 的 api 去操作配置對(duì)象。例如：

// 設(shè)置靜態(tài)資源的線上路徑
const publicPath = '//www.static.chameleon.com/static';

// 設(shè)置 API 請(qǐng)求前綴
const apiPrefix = 'https://api.chameleon.com';

// 合并配置
cml.config.merge({
  templateType: 'html',
  projectName: 'Chameleon',
  base: {
    dev: {
      domain1: 'localhost',
      domain2: 'localhost',
    },
    build: {
      domain1: 'http://www.cml1.com',
      domain1: 'http://www.cml2.com',
    },
  },
  web: {
    dev: {
      hot: true,
      console: true,
    },
    build: {
      publicPath: `${publicPath}/web`,
      apiPrefix,
    },
  },
});

配置 api

• cml.config.merge(obj) merge 方式修改配置。
• cml.config.assign(obj) assign 方式修改配置
• cml.config.get() 獲取 config 配置

配置對(duì)象結(jié)構(gòu)

配置對(duì)象的第一級(jí)為全局配置，例如projectName,全局配置中有各平臺(tái)內(nèi)的配置對(duì)象，例如web、wx、weex等。其中base對(duì)象用于配置各個(gè)平臺(tái)對(duì)象的公共部分。

平臺(tái)對(duì)象內(nèi)部分為各 media 的配置對(duì)象，例如dev、build。

配置詳解

下面就詳細(xì)介紹配置中的功能。

Web 端頁面文件 類型

templateType, String 類型。該字段控制 Web 端構(gòu)建 出的頁面文件類型。

• templateType: 'html' 構(gòu)建出.html 文件，純前端模板
• templateType: 'smarty' 構(gòu)建出.tpl 文件

例如：

cml.config.merge({
  templateType: 'html',
});

Web 端頁面文件名稱

projectName, String 類型。

該字段控制 Web 端構(gòu)建 出的模板文件名稱，默認(rèn)是當(dāng)前項(xiàng)目的根目錄文件夾名稱。

例如：

cml.config.merge({
  projectName: 'test_cml',
  templateType: 'html',
});

Web 端構(gòu)建出 test_cml.html文件

模板語法

templateLang, String 類型。CML 的視圖層支持兩種模板語法，通過在 template 上的lang屬性做區(qū)分，如果不寫默認(rèn)是 CML 語法。該字段控制init page 和init component 時(shí)生成的 cml 文件的 template 模板上的lang屬性。例如：

cml.config.merge({
  templateLang: 'cml',
});

支持端配置

platforms, Array[String]類型。 配置當(dāng)前項(xiàng)目支持的 端，該配置決定cml dev和cml build命令啟動(dòng)構(gòu)建的端，決定cml init命令初始化多態(tài)接口和多態(tài)組件時(shí)只生成相應(yīng)端代碼。 例如：

cml.config.merge({
  platforms: ['web', 'wx'],
});

cml dev和cml build只啟動(dòng) web 和 wx 端的構(gòu)建。

關(guān)閉某一端構(gòu)建

devOffPlatform和buildOffPlatform, Array[String] 類型。 當(dāng)我們執(zhí)行cml dev 和 cml build 時(shí)會(huì)自動(dòng)構(gòu)建輸出 所有平臺(tái)的代碼，可以通過這兩個(gè)字段控制不需要構(gòu)建的平臺(tái)，目前支持取值["web","wx","weex"]。 例如：

cml.config.merge({
  devOffPlatform: ['wx'],
  buildOffPlatform: ['wx'],
});

語法檢查

enableLinter, Boolean 類型。

默認(rèn)為 true，是否開啟 CML 的語法檢查，會(huì)在命令行提示語法錯(cuò)誤。 例如：

cml.config.merge({
  enableLinter: false,
});

多態(tài)校驗(yàn)控制

check, Object 類型。 CML 提供了多態(tài)接口與多態(tài)組件的寫法，同時(shí)為了保證代碼的質(zhì)量提供了多態(tài)校驗(yàn)的方法，可以通過check字段進(jìn)行校驗(yàn)的控制。

check.enable, Boolean 類型。 控制是否開啟多態(tài)校驗(yàn)，默認(rèn)true。

check.enableTypes, Array[String] 類型。 可取值["Object","Array","Nullable"],控制校驗(yàn)中是否可以定義直接定義 Object 和 Array 類型，和 是否可以定義可為空類型,默認(rèn)值為[]。 例如：

cml.config.merge({
  check: {
    enable: true,
    enableTypes: ['Object', 'Array', 'Nullable'],
  },
});

全局變量校驗(yàn)

enableGlobalCheck, Boolean 類型。默認(rèn)是 false,(chameleon-tool 0.2.0 版本及之后默認(rèn)為 true)，控制是否進(jìn)行全局變量的檢驗(yàn)。

例如：

cml.config.merge({
  enableGlobalCheck: true,
});

全局變量校驗(yàn)白名單

globalCheckWhiteList, Array[String|RegExp] 類型。

chameleon 內(nèi)置了全局變量校驗(yàn)的功能 可以設(shè)置白名單不校驗(yàn)?zāi)承┪募?。以文件絕對(duì)路徑進(jìn)行匹配，可以是正則表達(dá)式徑，也可以是字符串的 endWiths。

例如：

cml.config.merge({
  globalCheckWhiteList: ['jquery.js', /node_modules/],
});

則所有以 jquery.js 結(jié)尾的文件以及 正則匹配 /node_modules/ 的不做校驗(yàn)；

dev 服務(wù)端口

devPort, Number 類型。 dev 模式啟動(dòng)的 web 服務(wù)端口，默認(rèn)是從 8000 開始尋找空閑端口，避免了啟動(dòng)多個(gè)項(xiàng)目時(shí)的端口沖突問題。如果想指定端口可以使用該參數(shù)進(jìn)行配置。 例如：

cml.config.merge({
  devPort: 8080,
});

配置 babel-loader 不處理的文件

excludeBablePath, Array[String|RegExp] 類型。

const path = require('path');
cml.config.merge({
  excludeBablePath: [/test-exclude/, path.resolve(__dirname, './src/excludes')],
});

這個(gè)配置的結(jié)果會(huì)作為 webpack 模塊配置中 Rule.exclude 的值；

配置 babel-loader 處理的文件

babelPath, Array[String|RegExp] 類型。 默認(rèn)開發(fā)者引入的 node_modules 中的文件不經(jīng)過 babel，如有文件需要 babel，設(shè)置該參數(shù)。

const path = require('path');
cml.config.merge({
  babelPath: [path.resolve(__dirname, 'node_modules/test/')],
});

這個(gè)配置的結(jié)果會(huì)作為 webpack 模塊配置中 Rule.include 的值；

cmss 處理

cmss，Object 類型。 僅用于 Web 端。其中包含 rem 及 scale 屬性，Web 端構(gòu)建時(shí)默認(rèn)將 cpx 轉(zhuǎn)為 rem，當(dāng)不需要時(shí)轉(zhuǎn)為 rem 時(shí)，將 rem 置為 false，則 scale 參數(shù)生效，scale 為像素縮放倍數(shù)，默認(rèn)為 1，會(huì)將 cpx 按照 scale 的設(shè)置進(jìn)行縮放為 px。例如：

cml.config.merge({
  cmss: {
    rem: false,
    scale: 0.5,
  },
});

該設(shè)置 Web 端 cpx 不轉(zhuǎn)為 rem，而縮小 1 倍轉(zhuǎn)為 px，例如 10cpx 轉(zhuǎn)為 5px。

禁用基礎(chǔ)樣式

baseStyle， Object 類型。 chameleon 為了讓各端樣式統(tǒng)一，默認(rèn)會(huì)在全局插入一些基礎(chǔ)樣式，如果開發(fā)者的跨端不需要這些基礎(chǔ)樣式，可以通過該參數(shù)進(jìn)行設(shè)置。key 值為端名稱，value 為 Boolean 值，是否插入 基礎(chǔ)樣式。例如：

cml.config.merge({
  baseStyle: {
    web: false,
    wx: false,
    weex: false,
  },
});

該設(shè)置 web、wx、Weex 端均不插入基礎(chǔ)樣式。

全局引用 npm 組件庫

cmlComponents, Array[String] 類型。 當(dāng)我們想把 npm 組件庫中的組件全部自動(dòng)引入，而不需要單獨(dú)引入時(shí)，可以通過該字段配置 npm 包名稱。例如 cml-ui是我們提供的一個(gè) npm 組件庫，可以進(jìn)行如下配置：

cml.config.merge({
  cmlComponents: ['cml-ui'],
});

npm 組件庫的package.json中的main字段可以指定路徑，否則就會(huì)查找 npm 包中的所有 cml 文件自動(dòng)引入，自動(dòng)引入的組件名稱為 cml 文件名稱。

配置子項(xiàng)目

subProject, Array[String|Object]類型。 當(dāng)配置項(xiàng)為 Object 時(shí)， npmName 表示該子項(xiàng)目的地址(從 node_modules 層級(jí)開始配置)， isInjectBaseStyle 表示該子項(xiàng)目是否注入基礎(chǔ)樣式； 當(dāng)配置項(xiàng)為 String 時(shí)，該值直接表示該子項(xiàng)目的地址(從 node_modules 層級(jí)開始配置)，此時(shí)不支持配置是否注入基礎(chǔ)樣式，子項(xiàng)目默認(rèn)注入基礎(chǔ)樣式。例如：

cml.config.merge({
  subProject: [
    {
      npmName: '@didi/cml-login',
      isInjectBaseStyle: false,
    },
    '@didi/base-style-test',
  ],
});

項(xiàng)目?jī)?yōu)化

chameleon-tool@1.0.5-alpha.1 開始支持

cml.config.merge({
  optimize: {
  watchNodeModules: false // 默認(rèn)不對(duì) node_modules中的文件進(jìn)行 watch,提升編譯性能
});

全局樣式

chameleon-tool@1.0.5-alpha.1 開始支持

cml.config.merge({
  globalStyleConfig: {
    //globalCssPath 該路徑下的樣式對(duì)非 Weex 端生效；
    globalCssPath: path.join(__dirname, 'src/assets/global.config.less'),
    weexCssConfig: {
      //該文件內(nèi)的樣式會(huì)作為全局樣式導(dǎo)入
      weexCssPath: path.join(__dirname, 'src/assets/global.weex.less'),
      //由于weex端本身的限制，假如某些情況下，要覆蓋內(nèi)置組件的某個(gè)樣式，我們提供了對(duì)于該組件注入樣式的方式，注入的樣式只會(huì)對(duì)該組件生效
      injectCss: [
        {
          componentPath: path.join(
            __dirname,
            'node_modules/cml-ui/components/c-dialog/c-dialog.cml',
          ),
          cssPath: path.join(__dirname, 'src/assets/c-dialog.less'),
        },
      ],
    },
  },
});

構(gòu)建結(jié)果信息

buildInfo, Object 類型。 buildInfo.wxAppId,String 類型。微信的 appId。

當(dāng)執(zhí)行完 cml build 后會(huì)生成一個(gè)config.json文件，該文件存儲(chǔ)構(gòu)建后各平臺(tái)的頁面信息。可以通過這個(gè) json 文件做頁面的動(dòng)態(tài)下發(fā)，頁面降級(jí)等等。

例如：

cml.config.merge({
  buildInfo: {
    wxAppId: '123456',
  },
});

cml build 后生成 在dist/config.json

    {
        "wx": {
            "appId": "123456",
            "path": "/pages/index/index"
        },
        "web": {
            "url": "https://api.chameleon.com/cml/h5/index"
        },
        "weex": {
            "url": "https://static.chameleon.com/pinche/hkcml/weex/hybridkits_pageone_e86b77ae05a015a3a546.js",
            "query": {
                "path": "/pages/index/index"
            }
        }
    }

config.json 中微信小程序的 appId 是 通過buildInfo配置生成，其他的頁面信息是根據(jù)router.config.json中的配置生成。

例如：

cml.config.merge({
  enableLinter: false,
});

構(gòu)建入口與頁面

默認(rèn)的入口與頁面集成在命令行中，對(duì)于有特殊 需求的開發(fā)者，CML 提供了可以自定義 Web 端構(gòu)建入口與頁面，Weex 端構(gòu)建入口的功能。 entry, Object 類型。 entry.template, String 類型。 頁面文件的絕對(duì)路徑。 entry.web, String 類型。 Web 端入口文件的 絕對(duì)路徑。 entry.weex, String 類型。 wewx 端入口文件的 絕對(duì)路徑。 例如：

var path = require('path');
cml.config.merge({
  entry: {
    template: path.resolve('./src/index.html')
    web: path.resolve('./src/mian.web.js')
    weex: path.resolve('./src/main.weex.js')
  }
})

平臺(tái)內(nèi)配置

每一個(gè)平臺(tái)的構(gòu)建會(huì)需要不同的配置，所以針對(duì)每一個(gè)平臺(tái)會(huì)有一個(gè)平臺(tái)配置對(duì)象，平臺(tái)配置對(duì)象中又有多個(gè) media 配置對(duì)象，例如 dev 或者 build 的配置。 下面講述的配置項(xiàng)都是放在 media 對(duì)象中。例如： wx web weex是平臺(tái)對(duì)象，里面的dev和build是 media 對(duì)象。

cml.config.merge({
  wx: {
    dev: {},
    build: {},
  },
  web: {
    dev: {},
    build: {},
  },
  weex: {
    dev: {},
    build: {},
  },
});

以下介紹平臺(tái)內(nèi)配置支持的配置項(xiàng)

文件指紋

文件指紋是文件的唯一標(biāo)識(shí)，以文件的內(nèi)容生成 hash 值作為文件名稱的一部分。在開啟強(qiáng)緩存的情況下，如果文件的 URL 不發(fā)生變化，無法刷新瀏覽器緩存。文件指紋 用于更新瀏覽器的緩存。小程序端不需要文件指紋。 默認(rèn)圖片資源 開啟 hash，build 模式開啟 hash。 通過hash字段配置。

hash, Boolean 類型。 控制打包出的 js 和 css 文件是否帶 hash 后綴，圖片字體等靜態(tài)資源自動(dòng)帶 hash，其小程序端不支持 hash 參數(shù)。

例如：

cml.config.merge({
  web: {
    dev: {
      hash: true,
    },
  },
});

下圖為 Web 端開啟文件指紋的打包結(jié)果。 

代碼壓縮

為了減少資源網(wǎng)絡(luò)傳輸?shù)拇笮。ㄟ^壓縮器對(duì) js、css、圖片進(jìn)行壓縮是一直以來前端工程優(yōu)化的選擇。在 CML 中只需要 配置minimize參數(shù)。

minimize, Boolean 類型。

控制打包出的文件是否進(jìn)行壓縮。

例如：

cml.config.merge({
  web: {
    dev: {
      minimize: true,
    },
  },
});

資源發(fā)布路徑

publicPath, String 類型。 控制代碼中靜態(tài)資源的引用路徑， 線上發(fā)布需要用到，media 為 dev 時(shí)默認(rèn) 小程序端是本地路徑，web 和 Weex 端是當(dāng)前 dev 服務(wù)的 路徑。 例如：

cml.config.merge({
  web: {
    build: {
      publicPath: 'http://www.chameleon.com/static',
    },
  },
});

熱更新與自動(dòng)刷新

熱更新與自動(dòng)刷新都是提高本地開發(fā)效率的手段，當(dāng)項(xiàng)目中的源代碼發(fā)生改變時(shí)， 能夠自動(dòng)的在頁面看到改變，其中熱更新不需要重新刷新預(yù)覽的頁面。目前只有 Web 端的開發(fā)支持熱更新，通過hot 參數(shù)配置。 dev模式默認(rèn)自動(dòng)刷新，Web 端可以選擇開啟熱更新。

hot, Boolean 類型。

控制是否開啟熱更新，只在 Web 端生效，開啟熱更新時(shí)，css 代碼不會(huì)單獨(dú)分離出來，如果進(jìn)行線上 js 代理本地 js 調(diào)試問題時(shí)，請(qǐng)關(guān)閉熱更新。

例如：

cml.config.merge({
  web: {
    dev: {
      hot: true,
    },
  },
});

打包資源分析

analysis, Boolean 類型。

控制是否 打開 webpack 打包分析工具， 內(nèi)部使用的webpack-bundle-analyzer插件。

例如：

cml.config.merge({
  web: {
    dev: {
      analysis: true,
    },
  },
});

調(diào)試窗口

console, Boolean 類型。

控制是否打開頁面上的調(diào)試窗口，只在 Web 端有效，方便在真機(jī)上進(jìn)行調(diào)試。

例如：

cml.config.merge({
  web: {
    dev: {
      console: true
    }
  }
})

內(nèi)置變量

definePlugin, Object 類型，內(nèi)部使用webpack.DefinePlugin實(shí)現(xiàn)，定義運(yùn)行時(shí)的內(nèi)置變量。 例如：

cml.config.merge({
  web: {
    dev: {
      definePlugin: {
        'process.env.TEST': JSON.stringify('CML_TEST')
      }
    }
  }
})

API 請(qǐng)求前綴

apiPrefix, String 類型。 這個(gè)配置與網(wǎng)絡(luò)請(qǐng)求相關(guān)，在 wx 和 Weex 項(xiàng)目中，ajax 的請(qǐng)求不能像 Web 端一樣只寫相對(duì)路徑，而是要寫帶有域名的絕對(duì)路徑，chameleon-api 這個(gè)基礎(chǔ)庫，提供了網(wǎng)絡(luò)請(qǐng)求的 api，get、post、request方法，該方法會(huì)在運(yùn)行時(shí)將請(qǐng)求的相對(duì)路徑上添加配置的apiPrefix。media 是 dev 時(shí) 默認(rèn)為當(dāng)前 dev 服務(wù)的地址,不需要配置。 例如： chameleon.config.js

// 設(shè)置 API 請(qǐng)求前綴
const apiPrefix = 'http://api.chameleon.com';
cml.config.merge({
  wx: {
    dev: {
    },
    build: {
      apiPrefix
    }
  }
})

<script>
import cml from 'chameleon-api';
class Index {
  methods = {
    sendGet() {
      cml
        .get({
          url: '/api/driver/getList',
          data: {
            name: 'cml',
            age: 18,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  };
}
export default new Index();
</script>

在執(zhí)行 cml wx dev 命令構(gòu)建的結(jié)果中，cml.get() 方法發(fā)送的請(qǐng)求是 http://172.22.137.29:8000/api/driver/getList

在執(zhí)行 cml wx build 命令構(gòu)建的結(jié)果中，cml.get() 方法發(fā)送的請(qǐng)求是 http://api.chameleon.com/api/driver/getList

模塊標(biāo)識(shí)類型

moduleIdType,String 類型。 設(shè)置 webpack 打包模塊的 id 類型。

• number 順序排列的數(shù)組下標(biāo)。
• hash 利用 webpack.HashedModuleIdsPlugin() 模塊的 id 類型為模塊內(nèi)容的 hash 值。
• name 利用 webpack.NamedModulesPlugin() 模塊的 id 類型為文件的路徑。
• CML 用于 build 模式，模塊的 id 類型為模塊內(nèi)容的 hash，并且最終文件的 hash 也經(jīng)過優(yōu)化處理，根據(jù)文件內(nèi)容絕對(duì) hash 值。 默認(rèn) media 為 dev 時(shí) 取值 為 name 方便開發(fā)調(diào)試， media 為 build 時(shí)取值為 CML 保證 hash 值由文件內(nèi)容決定，更好的做緩存持久化。

例如：

cml.config.merge({
  web: {
    dev: {
      moduleIdType: "number"
    }
  }
})

babelPolyfill

chameleon-tool@0.0.15 開始支持 Web 端 chameleon-tool@0.3.0 開始支持 小程序端 chameleon-tool@0.3.3 開始支持 Weex 端

babelPolyfill, Boolean 類型, 默認(rèn) false。 一些 es6+的語法，babel 不會(huì)轉(zhuǎn)義，例如 Object.sssign、Object.entries 等方法, 如果客戶端運(yùn)行環(huán)境不支持這些語法就會(huì)出錯(cuò)。其中 Web 使用的是 @babel/polyfill, 小程序端使用的是自寫的一些方法的 polyfill，參見 miniappPolyfill，Weex 端使用的是自寫的一些方法的 polyfill，參見 weexPolyfill。注意添加 polyfill 后會(huì)增加一些文件體積。

例如：

cml.config.merge({
  base: {
    dev: {
      babelPolyfill: true
    },
    build: {
      babelPolyfill: true
    }
  }
})

Domain 多域名請(qǐng)求前綴

chameleon-tool@0.2.1 chameleon-api@0.3.1 開始支持

domain, Object 類型。 一般配置在 base 對(duì)象中，作為所有平臺(tái)的公共配置，dev 模式中配置的localhost會(huì)替換成當(dāng)前 dev 模式啟動(dòng)的 web 服務(wù) ip+端口。 具體使用文檔參見 API 多域名 Mock。

例如：

cml.config.merge({
  base: {
    dev: {
      domain: {
        domain1: "localhost",
        domain2: "localhost"
      },
    },
    build: {
      domain: {
        domain1: "http://api.cml.com",
        domain2: "http://api2.cml.com"
      },
    }
  },
})

自定義構(gòu)建配置

如果我們需要多套構(gòu)建配置，可以自定義一個(gè) media，比如設(shè)置 weex.custom 對(duì)象，然后執(zhí)行cml weex custom即可使用你設(shè)置的 custom 配置進(jìn)行構(gòu)建，但是不會(huì)啟動(dòng) dev 服務(wù)和 watch。 例如：

cml.config.merge({
  weex: {
    custom: {
      minimize: true, //對(duì)打包結(jié)果進(jìn)行壓縮
      moduleIdType: 'name', //編譯的模塊結(jié)果以模塊名字顯示
    },
  },
});

自定義構(gòu)建配置可配置項(xiàng)和上面介紹的平臺(tái)內(nèi)配置項(xiàng)是一樣的，比如同樣支持 publicPath apiPrefix hash minimize anslysis 等；

假如你在構(gòu)建微信小程序端，一個(gè)構(gòu)建模式下要求不壓縮代碼，一個(gè)構(gòu)建模式下要求顯示模塊名字，那么可以如下配置

cml.config.merge({
  wx: {
    build: {
      minimize: true, //對(duì)打包結(jié)果進(jìn)行壓縮
      moduleIdType: 'id', //編譯的模塊結(jié)果以模塊名字顯示
    },
    custom: {
      minimize: false, //對(duì)打包結(jié)果進(jìn)行壓縮
      moduleIdType: 'name', //編譯的模塊結(jié)果以模塊名字顯示
    },
  },
});

執(zhí)行 cml wx build 則打包的代碼會(huì)進(jìn)行壓縮以及模塊名以 id 取名； 執(zhí)行 cml wx custom 則打包的代碼不會(huì)壓縮抑菌劑模塊名以該模塊對(duì)應(yīng)的 name 取名

組件導(dǎo)出配置

組件導(dǎo)出相關(guān)的配置請(qǐng)參見組件導(dǎo)出介紹。

修改 webpack 配置

在chameleon.config.js中可以通過 api 獲取到構(gòu)建之前的 webpack 配置并對(duì)其進(jìn)行修改。使用方式：

cml.utils.plugin('webpackConfig', function({ type, media, webpackConfig }, cb) {
  // cb函數(shù)用于設(shè)置修改后的配置
  cb({
    type,
    media,
    webpackConfig
  });
});

平臺(tái)列表