创建插件

每一个插件都是一个 npm 模块，命名规则为 ykit-config-<name>，比如 ykit-config-yo。

最简单的方法是 fork 一份 ykit-config-seed，根据需求在 index.js 中添加自己的内容。

配置

从插件中可以修改 Webapck 配置，配置的优先级关系是 项目配置 > 插件配置 > ykit基础配置。

在 index.js 的配置函数中，我们可以通过 modifyWebpackConfig 获取到当前 webpack 配置，并对其进行修改。

  1. module.exports = {
  2.     config: {
  3.         // 更改 Webpack 配置
  4.         modifyWebpackConfig: function(config) {
  5.             config.module.loaders.push({
  6.                 test: /\.js|jsx$/,
  7.                 exclude: /(node_modules|bower_components)/,
  8.                 loader: 'babel'
  9.             })
  10.             return config;
  11.         }
  12.     }
  13. }

脚手架

插件中可以包含脚手架，并通过 ykit 一键初始化项目。

ykit 支持 init 过程中寻找插件，命令规则为 ykit init <plugin-name>，比如 ykit init yo。则会在当前目录下初始化项目，并为之安装 ykit-config-yo这个插件。

安装结束后 ykit 会自动执行该插件中的 setup 命令，在这个命令中我们可以进行复制模板、安装第三方 npm 模块等操作。具体详见下方自定义命令部分和 ykit-config-seed 中的命令模板。

自定义钩子

我们可以在构建流程中触发一系列回调函数，具体详见hooks 配置：

  1. module.exports = {
  2.     config: {
  3.         // ...
  4.     },
  5.     hooks: {
  6.         beforePack: function(opt) {
  7.             // do something
  8.         },
  9.         beforeCompiling: function(opt, webpackConfig) {
  10.             // do something
  11.         },
  12.         afterPack: function(opt, stats) {
  13.             // do something
  14.         }
  15.     }
  16. }

自定义命令

作用相当于执行一段 node 脚本，具体详见命令配置。

  1. module.exports = {
  2.     config: {
  3.         // ...
  4.     },
  5.     commands: [
  6.         {
  7.             name: '<command_name>',
  8.             module: require('./commands/<command_name>.js')
  9.         }
  10.     ]
  11. }

之后，可以使用 ykit <command_name> 执行该命令。

自定义中间件

我们可以在本地服务中使用自定义中间件，具体详见自定义中间件：

  1. module.exports = {
  2.     config: {
  3.         modifyWebpackConfig: function(baseConfig) {
  4.             // 示例：处理 .hello 类型文件，全部返回文字 "hello!"
  5.             this.applymiddleware((req, res, next) => {
  6.                 if(path.extname(req.url) === '.hello') {
  7.                     res.end('hello!'); // 直接返回结果
  8.                 } else {
  9.                     next(); // 不进行处理，转给后续中间件
  10.                 }
  11.             })
  12.             return baseConfig;
  13.         }
  14.     }
  15. }

继承

插件之间可以继承。如果想包含某个别的插件的配置和功能，可以直接将其继承过来。

  1. var es6Config = require('ykit-config-es6');
  3. module.exports = {
  4.     // 注意这里 config 是一个函数
  5.     config: function (options, cwd) {
  6.         // 继承 ykit-config-es6
  7.         es6Config.config.call(this, options, cwd);
  8.         // ...
  9.     };
  10. }

发布插件

编辑 package.json 中的模块名称、版本号等信息，执行 npm publish 即可。

如果想加入官方插件请联系 siven.jin。