更新时间:2019-09-26 18:35
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 */);
}
}
}
重要: 依赖 build
@ 0.1.49+ 及以上版本。
http-proxy-middleware
:
cnpm install --save-dev http-proxy-middleware
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 模块文档
);
}
}
}
postcss-px2rem
:
cnpm install --save-dev postcss-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;
}
}
}
在文档使用中是否遇到以下问题
更多建议
匿名提交