文档

扩展能力

更新时间:

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

操作步骤

完成以下步骤进行扩展:

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

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

    // 在 package.json 中
    {
     "kylinApp": {
         "plugins": [
               "module:./plugin.js"
         ]
     }
    }
  3. plugin.js 中编写如下代码。在如下 modifyWebpackConfigmodifyBabelConfig 两个函数中,修改原有的 webpackbabel 配置。

    // 在 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;
         }
     }
    }
  • 本页导读 (0)