扩展能力

操作步骤

完成以下步骤进行扩展：

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 插件

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;
        }
    }
   }