快應(yīng)用 編譯工具

開發(fā)者開發(fā)快應(yīng)用項(xiàng)目時(shí)，需要利用腳手架創(chuàng)建一個(gè)快應(yīng)用的初始化項(xiàng)目并編寫項(xiàng)目源代碼；

之后使用編譯工具編譯項(xiàng)目得到構(gòu)建文件（以rpk后綴命名，如：?com.application.demo.rpk?）；

當(dāng)?shù)玫巾?xiàng)目編譯后的構(gòu)建文件后，可以使用調(diào)試器安裝并運(yùn)行該項(xiàng)目。

上面就是編譯工具的主要任務(wù)：

1) 初始化項(xiàng)目：創(chuàng)建空的快應(yīng)用項(xiàng)目工程；

2) 編譯項(xiàng)目：校驗(yàn)源碼文件，構(gòu)建項(xiàng)目得到產(chǎn)出文件；

3) 下載與更新產(chǎn)出：建立HTTP服務(wù)器，當(dāng)手機(jī)運(yùn)行時(shí)請求資源和調(diào)試應(yīng)用時(shí)，完成下載更新；

其中第二步?編譯項(xiàng)目?的工作量最大，開發(fā)者對項(xiàng)目編譯的需求也各不相同，因此提供下面的個(gè)性化配置能力。

編譯參數(shù)

編譯工具提供了多種編譯能力，開發(fā)者可以根據(jù)項(xiàng)目需求進(jìn)行設(shè)置。

比如開發(fā)者想啟用端到端的測試能力，可以在編譯項(xiàng)目時(shí)攜帶參數(shù)?--enable-e2e?。這樣，開發(fā)者就可以在運(yùn)行快應(yīng)用時(shí)進(jìn)行端到端的測試。

如何設(shè)置編譯參數(shù)

通常有兩種方式設(shè)置編譯參數(shù)，以開發(fā)者開啟端到端測試能力并抽取單獨(dú)的 source-map 文件為例：

• 在命令行攜帶編譯參數(shù)；

npx hap build --enable-e2e --devtool=source-map

或者

npm run build -- --enable-e2e --devtool=source-map

注意：如果是上面通過 npm 運(yùn)行，記得攜帶：?--?標(biāo)識讓參數(shù)傳遞到內(nèi)部的命令；

• 在項(xiàng)目根目錄新建配置文件?quickapp.config.js?，并配置cli屬性；

module.exports = {
  cli: {
    enableE2e: true,
    devtool: 'source-map'
  }
}

輸出編譯工具當(dāng)前版本支持的編譯參數(shù)

  npx hap build -h

常見編譯參數(shù)

常見的編譯參數(shù)如下：

啟用e2e測試：?--enable-e2e?

開發(fā)者如果想針對項(xiàng)目的功能模塊或者接口兼容性進(jìn)行真機(jī)自動化測試，可以開啟 e2e 測試能力。開啟 e2e 測試能力會導(dǎo)致rpk體積變大，適用于項(xiàng)目代碼的測試用例保證場景，在項(xiàng)目上線階段不要啟用該能力。

使用方法請查看 自動化測試文檔。

啟用代碼覆蓋率統(tǒng)計(jì)：?--enable-istanbul?

開發(fā)者如果想針對項(xiàng)目中多次調(diào)用的部分進(jìn)行優(yōu)化，可以啟用代碼覆蓋率統(tǒng)計(jì)能力。啟用該能力后，開發(fā)者可以在調(diào)試工具提供的頁面中查看各個(gè)模塊的使用情況，進(jìn)行針對性優(yōu)化。

使用方法請查看 代碼覆蓋率使用文檔。

sourcemap配置：?--devtool <value>?

編譯工具在編譯項(xiàng)目時(shí)默認(rèn)將 sourcemap打到 js 文件內(nèi)，通過設(shè)置 value 可以控制sourcemap輸出形式。具體內(nèi)容可以參考webpack的 devtool 選項(xiàng)。默認(rèn)為none，設(shè)置為source-map值表示單獨(dú)輸出 sourcemap 文件。

啟用抽離樣式能力：?--enable-extract-css?

快應(yīng)用在1070以上版本對樣式計(jì)算進(jìn)行了優(yōu)化，啟用該能力可以將頁面和組件的樣式在編譯時(shí)進(jìn)行提取，加速運(yùn)行時(shí)樣式計(jì)算過程。單獨(dú)啟用會增加rpk包的體積，配合--remove-ux-style參數(shù)可以保證 rpk 體積不變。

啟用日志診斷能力：?--enable-diagnosis?

開發(fā)中經(jīng)常需要調(diào)試頁面，之前可以使用調(diào)試器工具啟動 devtools 頁面來完成界面與 JS 的調(diào)試，有時(shí)開發(fā)者也希望能夠有一種輕量級的調(diào)試方式；

通過啟用該參數(shù)，編譯時(shí)工具將會在項(xiàng)目構(gòu)建時(shí)，引入額外的JS文件，該文件會監(jiān)聽?console?對象上的?error()/warn()/info()/debug()/log()?方法調(diào)用，并將相應(yīng)的日志信息記錄下來，通過fetch請求發(fā)送到項(xiàng)目的服務(wù)器（通過?npm?? run server?）中；

服務(wù)器收到請求的信息時(shí)，會將對應(yīng)設(shè)備的日志輸出記錄在項(xiàng)目根目錄的?logs?文件夾中，文件夾中的每個(gè)文件代表了一個(gè)對應(yīng)的快應(yīng)用設(shè)備運(yùn)行時(shí)的日志輸出；

通過這種方式，開發(fā)者可以查看應(yīng)用運(yùn)行時(shí)最新的日志輸出，方便查看內(nèi)容與定位；

內(nèi)置日志監(jiān)聽的JS實(shí)現(xiàn)，請參考編譯時(shí)工具中的文件路徑，如：?./node_modules/@hap-toolkit/packager/router/lib/diagnosis.js?；

提示：該功能從編譯時(shí)工具?hap-toolkit@0.7.0?開始支持；

項(xiàng)目配置

快應(yīng)用可以支持常見的前端編譯工具，目前主要針對webpack(>=4)進(jìn)行兼容與設(shè)置，開發(fā)者可以在?quickapp.config.js?文件中配置，具體配置方法如下。

如何配置項(xiàng)目

在項(xiàng)目根目錄下增加?quickapp.config.js?文件，項(xiàng)目配置文件如下：

const path = require('path')

const webpack = require('webpack')

module.exports = {
  // hap命令構(gòu)建時(shí)的配置參數(shù)
  cli: {
    enableE2e: true
  },
  // 采用webpack編譯時(shí)的配置
  webpack: {
    resolve: {
      extensions: ['.uxtest'],
      alias: {
        '&': path.resolve(__dirname, 'src')
      }
    },
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000
              }
            }
          ]
        }
      ]
    },
    plugins: [
      // webpack插件示例
      new WebpackPluginDemo(),
      // 自動替換代碼中的變量
      new webpack.DefinePlugin({
        ENV_TYPE: process.env.type
      })
    ]
  }
}

class WebpackPluginDemo {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('WebpackPluginDemo', function (compilation, callback) {
      callback()
    })
  }
}

開發(fā)者對項(xiàng)目編譯會有不同的需求，可以在?webpack?命名空間下設(shè)置?resolve?、?module?、?plugins?屬性進(jìn)行自定義配置，webpack配置文檔地址。

配置參考示例

快應(yīng)用在 Github的官方站點(diǎn)項(xiàng)目：quickappcn/hap-toolkit-usage，提供了常見的配置示例。