扩展能力

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

操作步骤

完成以下步骤进行扩展：

  1. 在工程根目录创建 plugin.js。
  2. 在 package.json 中的 kylinApp.plugins 中添加如下配置项：
    1. // 在 package.json 中
    2. {
    3.  "kylinApp": {
    4.      "plugins": [
    5.            "module:./plugin.js"
    6.      ]
    7.  }
    8. }
  3. 在 plugin.js 中编写如下代码。在如下 modifyWebpackConfig 和 modifyBabelConfig 两个函数中，修改原有的 webpack 和 babel 配置：
    1. // 在 plugin.js 中
    2. exports.pluginName = '@ali/kylin-plugin-custom';
    3. exports.default = function () {
    4.  return {
    5.      webpack: function modifyWebpackConfig(webpackConfig) {
    6.          console.log('webpackConfig', webpackConfig);
    7.          return webpackConfig;
    8.      },
    9.      babel: function modifyBabelConfig(babelConfig) {
    10.            console.log('babelConfig', babelConfig);
    11.          return babelConfig;
    12.      },
    13.      express: function modifyExpress(expressInstance) {
    14.          expressInstance.use(/* some middleware */);
    15.      }
    16.  }
    17. }

示例

接入 httpProxy 插件

重要： 依赖 build@ 0.1.49+ 及以上版本。

  1. 运行以下命令安装 http-proxy-middleware：
    1. cnpm install --save-dev http-proxy-middleware
  2. 修改 httpProxy 插件的 express 过程：
    1. // 在 plugin.js 中
    2. var proxy = require('http-proxy-middleware');
    3. exports.pluginName = '@ali/kylin-plugin-custom';
    4. exports.default = function () {
    5.  return {
    6.      express: function modifyExpress(expressInstance) {
    7.          expressInstance.use(
    8.                proxy('/api', {target: 'http://www.baidu.com'})
    9.              // 更多详细配置参阅 http-proxy-middleware 模块文档
    10.          );
    11.      }
    12.  }
    13. }

接入 px2rem 插件

  1. 运行以下命令安装 postcss-px2rem：
    1. cnpm install --save-dev postcss-px2rem
  2. 修改 px2rem 插件的 Webpack 过程。
    1. // 在 plugin.js 中
    2. var px2rem = require('postcss-px2rem');
    3. exports.pluginName = '@ali/kylin-plugin-custom';
    4. exports.default = function () {
    5.  return {
    6.      webpack: function modifyWebpackConfig(webpackConfig) {
    7.          webpackConfig.vue.postcss.push(
    8.              px2rem({
    9.                    // 该参数和模版 html 中的 font-size 配置需要根据具体项目的 UI 交互稿修改 
    10.                    remUnit: 100     
    11.              })
    12.          );
    13.          return webpackConfig;
    14.      }
    15.  }
    16. }