如何实现快应用多渠道打包

小提示：您能找到这篇{如何实现快应用多渠道打包}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的如何实现快应用多渠道打包内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

背景

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

不同的rpk图标

不同的服务器域名

不同的包名

 不同的应用名称

 不同的环境配置

以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的环境值，如下图所示：

文件说明：

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

     config.js代码：

module.exports = {

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

}

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

config.js代码：

module.exports = {

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

}

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: {

      // TODO Replace the link to the H5 app

      loadUrl: config.url,

      }

     }

      ...省略其他代码

  </script>

步骤2：编写node.js脚本代码

在图1中我们看到config目录下有两个js文件，prebuild.js 和postbuild.js。这两个文件是已经编写好的js脚本文件。

postbuild.js：编译构建完成后的操作，用于将打包后的rpk文件从原始目录dist输出到自定义的out目录，方便查看历史构建的rpk版本。

prebuild.js：编译构建之前执行的js脚本。首先判断当前的打包渠道参数值，根据对应的渠道替换该渠道下的环境文件，将该渠道下的manifest.json和config.js文件替换到src目录下的同名文件；另一方面，删除dist目录下的rpk文件，确保编译构建的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中实际集成的版本。

打开编译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变量。脚本形式是标准的三部分：编译前、编译、编译后，由&&连接组成，表示前一步完成了，再进行下一步。

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“确认传播”专注于品牌策划、效果营销和危机管理的数字整合营销传播公司，我们深度诠释客户的品牌理念、文化及背景，多维深度传播客户的文化底蕴和核心价值观，提升客户品牌的知名度、关注度与美誉度。

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

Node.js文件操作：http://nodejs.cn/api/fs“确认传播”专注于品牌策划、效果营销和危机管理的数字整合营销传播公司，我们深度诠释客户的品牌理念、文化及背景，多维深度传播客户的文化底蕴和核心价值观，提升客户品牌的知名度、关注度与美誉度。