多渠道打包rpk

xuetianshi

在同一个项目中当有如下需求时：

l  不同的rpk图标

l  不同的服务器域名

l  不同的包名

l  不同的应用名称

l  不同的环境配置

以H5快应用为例，我有2个H5 url需要转换成2个不同的H5快应用，每个H5快应用的名称、logo、包名都是不同的，但是我不想创建2个项目，而是在1个项目中完成这两个H5快应用的打包。快应用能否做到呢？是否支持构建不同场景下的rpk包呢？

解决方法

   快应用属于前端开发，不像原生app开发工具Android Studio自动支持多渠道打包。但是快应用是可以通过写js脚本达到这个目的。以下解决步骤以打包两个H5快应用为例，均使用快应用web组件加载，一个url是百度首页，一个url是163首页。

 

步骤1: 配置环境变量

在已经创建好的H5快应用项目根目录下创建config目录，该目录下定义百度和163的环境值，如下图所示：

                                图1 项目结构

   文件说明：

l  163：配置H5 url为163首页的目录，该目录下config.js中定义了163首页的H5 url，manifest.json文件是163 H5快应用的配置文件，配置163 H5快应用的包名、应用名称、应用图标等信息。

     config.js代码：

   module.exports = {
    url: "https://m.163.com"
    }

 

l  baidu：配置H5 url为百度首页的目录。该目录下config.js中定义了百度首页的H5 url，manifest.json文件是百度H5快应用的配置文件，配置百度H5快应用的包名、应用名称、应用图标等信息。

config.js代码：

    module.exports = {
    url: "https://m.baidu.com"
    }

l  Hello：应用首页，hello.ux里使用web组件加载url，url值根据不同渠道是动态变化的，取值是来源于项目src目录下创建的config.js文件中暴露的变量url，注意非步骤1环境新建的环境目录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。这两个文件是已经编写好的js脚本文件。

l  prebuild.js：编译构建之前执行的js脚本。首先判断当前的打包渠道参数值，根据对应的渠道替换该渠道下的环境文件，将该渠道下的manifest.json和config.js文件替换到src目录下的同名文件；另一方面，删除dist目录下的rpk文件，确保编译构建的rpk包是最新的。

l  postbuild.js：编译构建完成后的操作，用于将打包后的rpk文件从原始目录dist输出到自定义的out目录，方便查看历史构建的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： 编译构建

1）  IDE工具栏选择Npm->Start Npm Library

2）  IDE工具栏选择Npm->Npm install

       当完成以上步骤时，项目工程下会生成两个文件package.json和fa-toolkit-3.1.2-Stable.301.tgz。其中fa-toolkit-3.1.2- Stable.301.tgz是编译器版本文件，版本号取决于IDE中实际集成的版本。

l  打开编译package.json文件，在scripts标签下添加build_163、 buid_baidu、copyRpk脚本，引入步骤2中定义的js文件。

3）  build_163: 编译构建163网页的H5快应用，“node ./config/prebuild.js 163”中的163是Node命令执行脚本的参数变量，此变量值对应prebuild.js中faEnv变量。脚本形式是标准的三部分：编译前、编译、编译后，由&&连接组成，表示前一步完成了，再进行下一步。

l  build_baidu：编译构建百度网页的H5快应用。

 

4）  进入项目根目录下执行打开cmd，执行npm run build_163，即可打包出163 H5快应用；执行npm run build_baidu即可打包出百度H5快应用。也可直接在IDE中切换到终端，然后执行同样命令。

package.json内容如下：

 {
  "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"
   }
  }

 

总结

快应用多渠道打包实现本质上是环境文件的替换，而这些环境判断、文件替换都是基于标准的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