创建插件

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

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

配置

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

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

module.exports = {
    config: {
        // 更改 Webpack 配置
        modifyWebpackConfig: function(config) {
            config.module.loaders.push({
                test: /\.js|jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            })
            return config;
        }
    }
}

脚手架

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

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

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

自定义钩子

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

module.exports = {
    config: {
        // ...
    },
    hooks: {
        beforePack: function(opt) {
            // do something
        },
        beforeCompiling: function(opt, webpackConfig) {
            // do something
        },
        afterPack: function(opt, stats) {
            // do something
        }
    }
}

自定义命令

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

module.exports = {
    config: {
        // ...
    },
    commands: [
        {
            name: '<command_name>',
            module: require('./commands/<command_name>.js')
        }
    ]
}

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

自定义中间件

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

module.exports = {
    config: {
        modifyWebpackConfig: function(baseConfig) {
            // 示例:处理 .hello 类型文件,全部返回文字 "hello!"
            this.applymiddleware((req, res, next) => {
                if(path.extname(req.url) === '.hello') {
                    res.end('hello!'); // 直接返回结果
                } else {
                    next(); // 不进行处理,转给后续中间件
                }
            })
            return baseConfig;
        }
    }
}

继承

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

var es6Config = require('ykit-config-es6');

module.exports = {
    // 注意这里 config 是一个函数
    config: function (options, cwd) {
        // 继承 ykit-config-es6
        es6Config.config.call(this, options, cwd);
        // ...
    };
}

发布插件

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

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