使用插件

Ykit 通过插件来扩展基础配置:

配置流程

插件安装与引入

插件命名格式均为ykit-config-{插件名},并且目前都是在@qnpm域下,在项目中通过 npm 安装插件:

$ sudo npm install @qnpm/ykit-config-{插件名} --registry http://registry.npm.corp.qunar.com/

安装插件后无需特殊引入,只要保证项目内的 ykit 配置文件ykit.{插件名}.js与使用的插件名对应即可。如安装了插件@qnpm-ykit-config-qunar,则配置文件命名为ykit.qunar.js

技术解决方案插件

总的来说,插件分为两种,技术解决方案插件自定义插件

技术解决方案插件由 Ykit 提供,以便于快速搭建不同的开发环境:

ykit-config-qunar

  • 添加 SASS 和 LESS 编译模块。
  • 实现资源入口从srcprd & dev的映射。
  • 添加ykit sync命令,同步代码至开发机。
  • 添加ykit source命令,上传静态资源。
  • 支持引入fekit_moudles

ykit-config-fekit

  • 继承自 ykit-config-qunar。
  • 兼容 Fekit 模块引用特殊语法(如 CSS 中 require 另一样式文件)。

ykit-config-hy

  • 继承自 ykit-config-qunar。
  • 添加 ES6 编译模块。
  • 添加 ES6 Lint 规则。
  • 内置 Hy2 (开发中)。

自定义插件

自定义插件设计的初衷是让开发团队针对自身整合一套开发环境,在其中可以添加/修改编译规则以及编译插件,加入更多开发工具,添加自定义命令,设计团队 lint 规则等等。

自定义插件示例:ykit-config-qunar

自定义插件的编写

注意:为了使 build 机器(node 0.12)可以正常编译,插件内部必须使用 es5 语法。

插件主要有三大功能:更改编译中间过程、添加编译回调、自定义命令。

更改编译中间过程

编译过程是一个不断更改 webapck 配置的过程,遵循 ykit基础配置 => 插件配置 => 业务配置 的流程。

插件中可以从 this.config 获取到当前 webpack 配置,并对其进行修改。 比如为某种后缀文件添加/修改 loader,下面例子修改了 scss 的 loader:

this.config.module.loaders = this.config.module.loaders.map(function(loader) {
    // 匹配到之前的并替换
    if(loader.test.test('.scss')){
        return {
            test: /\.(sass|scss)$/,
            loader: options.ExtractTextPlugin.extract(
                require.resolve('style-loader'),

                // 将 loader 替换为自己的
                require.resolve('css-loader')
                    + '?sourceMap!'
                    + require.resolve('@qnpm/ykit-config-qunar/loaders/sass.js') + '?sourceMap'
            )
        }
    }
    return loader
})

添加编译回调

编译回调是在整体编译结束后调用的方法。通过 this.packCallbacks 添加,如:

// opt 是 pack 命令后面跟的参数,stats 是编译结束后的结果数据,以下代码输出了每个打包资源的名字。
this.packCallbacks.push(function(opt, stats) {
    if (opt.m || opt.min) {
        var statsInfo = stats.toJson({
            errorDetails: false
        })

        statsInfo.assets.map(function(asset) {
            console.log(asset.name)
        });
    }
})

添加自定义命令

自定义命令使得在当前项目目录下可以执行一段 node 脚本。通过 this.commands 添加,如:

this.commands.push({
    name: 'my_command',
    module: require('./commands/my_command.js')
})

添加过后,在每个安装了该插件的项目中,就可以执行 ykit my_command 命令了。