All Products
Search
Document Center

Expansion capability

Last Updated: May 25, 2021

The Kylin framework supports extending Webpack, Babel, and Express configurations.

Procedure

Extend the Webpack, Babel, and Express configuration as follows:

  1. Create plugin.js in the root directory of the project.
  2. Add the following configuration item to kylinApp.plugins in package.json:

       
    1. // In package.json
    2. {
    3. "kylinApp": {
    4. "plugins": [
    5. "module:./plugin.js"
    6. ]
    7. }
    8. }
  3. Inplugin.js, write the following code. In the modifyWebpackConfig and modifyBabelConfig functions, modify the original webpack and babel configuration.

 
  1. // In 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. }

Examples

Access the httpProxy plug-in

Note: The kylin-build package version should be 0.1.49 or higher.
  1. Run the following command to install http-proxy-middleware.
       
    1. cnpm install --save-dev http-proxy-middleware
  2. Modify the express of the httpProxy plug-in.
       
    1. // In 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. // For more configuration information, see the http-proxy-middleware module documentation.
    10. );
    11. }
    12. }
    13. }

Access the px2rem plug-in

  1. Run the following command to install postcss-px2rem.
       
    1. cnpm install --save-dev postcss-px2rem
  2. Modify Webpack of the px2rem plug-in.
       
    1. // In 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. // Settings of this parameter and **font-size** in the template html need to be modified according to the UI interaction text of the project.
    10. remUnit: 100
    11. })
    12. );
    13. return webpackConfig;
    14. }
    15. }
    16. }