mPaaS-技术干货 | Kylin 框架-插件

Posted 2021-11-05 枯木前头万木春

一、插件

1.mock

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

2.开启插件

cnpm run dev:mock

3.使用插件

在项目的 ./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中的接口进行数据映射。

1. 在执行 cnpm run dev:mock 后，会进入mock 模式。

2. 该模式下在浏览器内执行AlipayJSBridge.call('abc')

3. 会去 ./mock/jsapi/abc.js寻找模拟接口数据。

二、package.json (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)操作步骤

完成以下步骤进行扩展：

1. 在工程根目录创建plugin.js。

2. 在 package.json中的 kylinApp.plugins中添加如下配置项:

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

3. 在 plugin.js中编写如下代码。
4. 在如下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 */);
		}
	}
}

(2)接入 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 模块文档
		);
		}
	}
}

(3)接入 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;
		}
	}
}