如何實(shí)現(xiàn)快應(yīng)用多渠道打包

背景

在同一個項(xiàng)目中當(dāng)有如下需求時：

不同的rpk圖標(biāo)

不同的服務(wù)器域名

不同的包名

 不同的應(yīng)用名稱

 不同的環(huán)境配置

以H5快應(yīng)用為例，我有2個H5 url需要轉(zhuǎn)換成2個不同的H5快應(yīng)用，每個H5快應(yīng)用的名稱、logo、包名都是不同的，但是我不想創(chuàng)建2個項(xiàng)目，而是在1個項(xiàng)目中完成這兩個H5快應(yīng)用的打包?？鞈?yīng)用能否做到呢？是否支持構(gòu)建不同場景下的rpk包呢？

解決方法

   快應(yīng)用屬于前端開發(fā)，不像原生app開發(fā)工具Android Studio自動支持多渠道打包。但是快應(yīng)用是可以通過寫js腳本達(dá)到這個目的。以下解決步驟以打包兩個H5快應(yīng)用為例，均使用快應(yīng)用web組件加載，一個url是百度首頁，一個url是163首頁。

步驟1: 配置環(huán)境變量

在已經(jīng)創(chuàng)建好的H5快應(yīng)用項(xiàng)目根目錄下創(chuàng)建config目錄，該目錄下定義百度和163的環(huán)境值，如下圖所示：

文件說明：

163：配置H5 url為163首頁的目錄，該目錄下config.js中定義了163首頁的H5 url，manifest.json文件是163 H5快應(yīng)用的配置文件，配置163 H5快應(yīng)用的包名、應(yīng)用名稱、應(yīng)用圖標(biāo)等信息。

     config.js代碼：

module.exports = {

    url: "https://m.163.com"

}

baidu：配置H5 url為百度首頁的目錄。該目錄下config.js中定義了百度首頁的H5 url，manifest.json文件是百度H5快應(yīng)用的配置文件，配置百度H5快應(yīng)用的包名、應(yīng)用名稱、應(yīng)用圖標(biāo)等信息。

config.js代碼：

module.exports = {

    url: "https://m.baidu.com"

}

Hello：應(yīng)用首頁，hello.ux里使用web組件加載url，url值根據(jù)不同渠道是動態(tài)變化的，取值是來源于項(xiàng)目src目錄下創(chuàng)建的config.js文件中暴露的變量url，注意非步驟1環(huán)境新建的環(huán)境目錄config下面的文件。

<script>

  import router from "@system.router";

  import config from "../config.js"

  export default {

    props: ['websrc'],

    data: {

      title: "",

      // TODO Replace the link to the H5 app

      loadUrl: config.url,

      }

     }

      ...省略其他代碼

  </script>

步驟2：編寫node.js腳本代碼

在圖1中我們看到config目錄下有兩個js文件，prebuild.js 和postbuild.js。這兩個文件是已經(jīng)編寫好的js腳本文件。

postbuild.js：編譯構(gòu)建完成后的操作，用于將打包后的rpk文件從原始目錄dist輸出到自定義的out目錄，方便查看歷史構(gòu)建的rpk版本。

prebuild.js：編譯構(gòu)建之前執(zhí)行的js腳本。首先判斷當(dāng)前的打包渠道參數(shù)值，根據(jù)對應(yīng)的渠道替換該渠道下的環(huán)境文件，將該渠道下的manifest.json和config.js文件替換到src目錄下的同名文件；另一方面，刪除dist目錄下的rpk文件，確保編譯構(gòu)建的rpk包是最新的。

prebuild.js示例代碼如下：

const path = require('path');

const fs = require("fs");

console.log("prebuild.js path="+path+", fs= "+fs);

//get env config

let faEnv = process.argv[2] ? process.argv[2] : '163';

console.log("faEnv : " + faEnv)

const projectPath = process.cwd();

console.log("projectPath= "+projectPath);

const configFilePath = path.join(projectPath, '/src/config.js');

console.log("configFilePath= "+configFilePath);

const manifestFilePath = path.join(projectPath, '/src/manifest.json');

console.log("manifestFilePath= "+manifestFilePath);

if (fs.existsSync(configFilePath)) {

    console.log("delete : config.js")

    fs.unlinkSync(configFilePath);

}

if (fs.existsSync(manifestFilePath)) {

    console.log("delete : manifest.json")

    fs.unlinkSync(manifestFilePath);

}

const distDirPath = path.join(projectPath, '/dist');

console.log("prebuild distDirPath= "+distDirPath);

if (fs.existsSync(distDirPath)) {

    console.log("postbuild.js exist  dist and out, begin copy rpk");

    fs.readdirSync(distDirPath).forEach(function (name) {

        var filePath = path.join(distDirPath, name);

        console.log("prebuild filePath= "+filePath+",name="+name);

        var stat = fs.statSync(filePath);

        if (stat.isFile()) {

            console.log("delete : rpk file");

            fs.unlinkSync(filePath);

        } 

    });

}

fs.copyFileSync(——${projectPath}/config/${faEnv}/config.js——, configFilePath);

fs.copyFileSync(——${projectPath}/config/${faEnv}/manifest.json——, manifestFilePath);

postbuild.js代碼如下：

const path = require('path');

const fs = require("fs");

console.log("postbuild.js path="+path+", fs= "+fs);

const projectPath = process.cwd();

console.log("projectPath= "+projectPath);

const distDirPath = path.join(projectPath, '/dist');

console.log("distDirPath= "+distDirPath);

const outDirPath = path.join(projectPath, '/out');

if (!fs.existsSync(outDirPath)) {

    //create output dir 

    console.log("out dir not exist and create")

     fs.mkdirSync(outDirPath);

}

if (fs.existsSync(distDirPath) && fs.existsSync(outDirPath)) {

    console.log("postbuild.js exist  dist and out, begin copy rpk");

    fs.readdirSync(distDirPath).forEach(function (name) {

        var filePath = path.join(distDirPath, name);

        console.log("filePath= "+filePath+",name="+name);

        var stat = fs.statSync(filePath);

        if (stat.isFile()) {

           var outrpkfilepath=path.join(outDirPath,name);

            fs.copyFileSync(filePath, outrpkfilepath);

        } 

    });

}

步驟3： 編譯構(gòu)建

1）  IDE工具欄選擇Npm->Start Npm Library

2）  IDE工具欄選擇Npm->Npm install

   當(dāng)完成以上步驟時，項(xiàng)目工程下會生成兩個文件package.json和fa-toolkit-3.1.2-Stable.301.tgz。其中fa-toolkit-3.1.2-Stable.301.tgz是編譯器版本文件，版本號取決于IDE中實(shí)際集成的版本。

打開編譯package.json文件，在scripts標(biāo)簽下添加build_163、 buid_baidu、copyRpk腳本，引入步驟2中定義的js文件。

3）  build_163: 編譯構(gòu)建163網(wǎng)頁的H5快應(yīng)用，“node ./config/prebuild.js 163”中的163是Node命令執(zhí)行腳本的參數(shù)變量，此變量值對應(yīng)prebuild.js中faEnv變量。腳本形式是標(biāo)準(zhǔn)的三部分：編譯前、編譯、編譯后，由&&連接組成，表示前一步完成了，再進(jìn)行下一步。

build_baidu：編譯構(gòu)建百度網(wǎng)頁的H5快應(yīng)用。

4）  進(jìn)入項(xiàng)目根目錄下執(zhí)行打開cmd，執(zhí)行npm run build_163，即可打包出163 H5快應(yīng)用；執(zhí)行npm run build_baidu即可打包出百度H5快應(yīng)用。也可直接在IDE中切換到終端，然后執(zhí)行同樣命令。

package.json內(nèi)容如下：

{

  "name": "com.h5.demo",

  "version": "1.0.0",

  "description": "",

  "scripts": {

    "build_163": "node ./config/prebuild.js 163 && npm run fa-release && npm run copyRpk",

    "build_baidu": "node ./config/prebuild.js baidu && npm run fa-release && npm run copyRpk",

    "fa-build": "node node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js",

    "copyRpk": "node ./config/postbuild.js",

    "fa-watch": "node node_modules/webpack/bin/webpack.js --watch --progress --config ./node_modules/fa-toolkit/webpack.config.js",

    "fa-release": "node ./node_modules/cross-env/src/bin/cross-env.js uglifyjs=true sign=release node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js"

  },

  "devDependencies": {

    "fa-toolkit": "file:fa-toolkit-3.1.2-Stable.301.tgz",

    "cross-env": "^7.0.2"

  }

}

總結(jié)

快應(yīng)用多渠道打包實(shí)現(xiàn)本質(zhì)上是環(huán)境文件的替換，而這些環(huán)境判斷、文件替換都是基于標(biāo)準(zhǔn)的npm腳本、node.js中的文件操作。

Npm腳本：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

https://docs.npmjs.com/cli/v7/using-npm/developers

Node.js文件操作：http://nodejs.cn/api/fs.html