扩展能力
Kylin 框架支持扩展 webpack、babel 和 express 配置。
操作步骤
完成以下步骤进行扩展:
在工程根目录创建
plugin.js
。在
package.json
中的kylinApp.plugins
中添加如下配置项。// 在 package.json 中 { "kylinApp": { "plugins": [ "module:./plugin.js" ] } }
在
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+ 及以上版本。
运行以下命令安装
http-proxy-middleware
:cnpm install --save-dev http-proxy-middleware
修改 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 插件
运行以下命令安装
postcss-px2rem
。cnpm install --save-dev postcss-px2rem
修改 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; } } }