mPaaS-kylin 插件的使用

Posted 2021-09-29 水香木鱼

一 mock

Kylin-plugin-mock 插件是针对在桌面浏览器（Chrome）中调试 JSAPI 的需要而开发的数据 mock 插件。

开启插件
在脚手架工程中，执行如下语句即可，其等价于运行命令时添加 --mock：

cnpm run dev:mock

使用插件
在项目的./mock/mock.config.js文件中，有如下配置项：

const config = {};
// 用户自定义mock
config.call = {
    // mock rpc 接口
    rpc: function (opts, callback) {
        var type = opts.operationType;
        var rpc = require('./rpc/' + type);
        var data = typeof rpc === 'function' ? rpc(opts) : rpc;
        // 防止在业务逻辑中对传入的对象进行了修改
        data = Object.assign({}, data);
        // 模拟服务端/网络接口延迟，此时会发现打了 2 次 log，一次是请求，一次包含返回结果
        setTimeout(() => {
            callback && callback(data);
        }, 2000);
    },
}
window.lunaMockConfig = config;

上述配置将./mock/rpc/*.js 中的接口进行数据映射。更多详细配置，可 获取代码示例 后查看。

示例
在执行cnpm run dev:mock后，会进入 mock 模式。该模式下在浏览器内执行 AlipayJSBridge.call('abc') ，会去./mock/jsapi/abc.js寻找模拟接口数据。

二 resource

Kylin-plugin-resource 插件是针对 mPaaS 平台下的全局离线资源包设计的一种资源拦截机制。

使用插件
在脚手架的package.json中，可以看到如下配置：

["resource", 
   {
    "map": {
      "vue": {
        "external": "Vue",
        "js": "https://gw.alipayobjects.com/as/g/h5-lib/vue/2.5.13/vue.min.js"
      },
      "fastclick": {
        "external": "FastClick",
        "js": "https://as.alipayobjects.com/g/luna-component/luna-fastclick/0.1.0/index.js"
      }
    }
  }
]

上述配置项表示当代码中出现如下的依赖语句，会进行一定处理：

import xxx from 'vue';
var xxx = require('vue');

上述对 vue 的依赖使用，会做如下处理：

在生成的 html 模板中注入<script src="https://gw.alipayobjects.com/as/g/h5-lib/vue/2.5.13/vue.min.js" ></script>脚本资源。
把上述 vue 依赖重定向为 window.Vue 的值。

三 扩展能力

Kylin 框架支持扩展 webpack，babel，express 配置。

操作步骤
完成以下步骤进行扩展：

1. 在工程根目录创建plugin.js。
2. 在package.json 中的 kylinApp.plugins中添加如下配置项：

// 在 package.json 中
{
 "kylinApp": {
     "plugins": [
           "module:./plugin.js"
     ]
 }
}

3. 在 plugin.js 中编写如下代码。在如下 modifyWebpackConfig 和 modifyBabelConfig 两个函数中，修改原有的 webpack 和 babel 配置：

// 在 plugin.js 中
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
 return {
     webpack: function modifyWebpackConfig(webpackConfig) {
         console.log('webpackConfig', webpackConfig);
         return webpackConfig;
     },
     babel: function modifyBabelConfig(babelConfig) {
           console.log('babelConfig', babelConfig);
         return babelConfig;
     },
     express: function modifyExpress(expressInstance) {
         expressInstance.use(/* some middleware */);
     }
 }
}

示例

四 接入 httpProxy 插件

重要： 依赖 build@ 0.1.49+ 及以上版本。

1. 运行以下命令安装 http-proxy-middleware：

cnpm install --save-dev http-proxy-middleware

2. 修改 httpProxy 插件的 express 过程：

// 在 plugin.js 中
var proxy = require('http-proxy-middleware');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
return {
    express: function modifyExpress(expressInstance) {
        expressInstance.use(
              proxy('/api', {target: 'http://www.baidu.com'})
            // 更多详细配置参阅 http-proxy-middleware 模块文档
        );
    }
}
}

五 接入 px2rem 插件

1. 运行以下命令安装 postcss-px2rem：

cnpm install --save-dev postcss-px2rem

2. 修改 px2rem 插件的 Webpack 过程。

// 在 plugin.js 中
var px2rem = require('postcss-px2rem');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
 return {
     webpack: function modifyWebpackConfig(webpackConfig) {
         webpackConfig.vue.postcss.push(
             px2rem({
                   // 该参数和模版 html 中的 font-size 配置需要根据具体项目的 UI 交互稿修改 
                   remUnit: 100     
             })
         );
         return webpackConfig;
     }
 }
}