全部产品
云市场

扩展能力

更新时间:2019-09-26 18:35:15

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 中编写如下代码。在如下 modifyWebpackConfigmodifyBabelConfig 两个函数中,修改原有的 webpackbabel 配置:
    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. }