配置

YKit 在每一个项目中都有一个单一的配置文件 ykit.js。通过该文件可以灵活地扩展和配置你的项目。以下是一些常用配置：

  • plugins - 指定引入的插件列表。插件会扩展项目的配置、命令等，可以帮助快速搭建特定的开发环境。
  • config - 项目的配置对象，通过它可以操作资源入口和 webpack 配置。
  • hooks - 打包过程中的钩子。
  • commands - 自定义命令，如构建、测试脚本等。

plugins

YKit 插件是对一类配置和功能的封装。每一个插件都是一个 NPM 模块，命名规则为 ykit-config-<name>，比如 ykit-config-yo。

首先通过 NPM 安装相应插件：

$ npm install --save ykit-config-yo

之后在 ykit.js 中配置 plugins 来将插件引入。

module.exports = {
    plugins: ['yo', 'react']
    // ...
};

更多相关文档详见 YKit-插件。

config.exports

通过该配置项可指定资源入口路径。

module.exports = {
    plugins: ['qunar'],
    config: {
        // 基于当前源代码目录，默认为 "src"
        exports: [
            './scripts/index.js', // 引入 <project_path>/src/scripts/index.js
            './styles/index.scss' // 引入 <project_path>/src/styles/index.scss
        ],
    }
    // ...
};

在 YKit 中，会实现目标目录（默认为 prd）与源目录（默认为 src）的对应。你可以将其理解成 Webpack 配置中的 output.path 和 context，YKit 隐藏了其中的配置细节。

这种说法可能有点抽象，在本地开发过程中，是允许目标目录 prd 并不实际存在的。举例来说，当本地 server 接收到 /prd/script/index.js 的请求，会自动编译 /src/script/index.js 并返回结果，而并不会在 prd 目录下实际生成一个文件。

config.modifyWebpackConfig

通过该配置项，你可以传入一个函数对当前的 webpack 配置（baseConfig）进行修改。

示例 - 更改输出配置（output）

在 ykit 中 output 是一个对象，它的属性是 ykit 打包的三种环境：

  • output.local: 起 server 时的输出配置
  • output.dev: ykit pack 的输出配置
  • output.prd: ykit pack -m 的输出配置

每个环境对象下面才是 webpack 的输出配置，比如你可以这样配置 ykit pack -m 的输出路径：

config.output.prd.path = 'dist';

或者通过 Object.assign 对已有的对象追加属性：

config.output.prd = Object.assign(config.output.prd, {
    path: 'dist'
});

示例 - 添加 loaders

module.exports = {
    plugins: ['qunar'],
    config: {
        exports: ['./scripts/app.js'],
        modifyWebpackConfig: function(baseConfig) {
            baseConfig.module.loaders.push({
                test: /\.mustache$/,
                loader: 'mustache'
            })
            return baseConfig;
        }
    }
};
注意使用该方法时尽量对配置项（loaders 或者 plugins 等）进行追加和合并操作，而不要覆盖掉原有配置。

示例 - 替换 loaders

如果是当前配置中已经存在 loader，则要进行替换操作：

module.exports = {
    plugins: ['qunar'],
    config: {
        exports: ['./scripts/app.js'],
        modifyWebpackConfig: function(baseConfig) {
            // 替换处理 scss 原有的 loader
            baseConfig.module.loaders = baseConfig.module.loaders
                .map(function (loader) {
                    if (loader.test.toString().match(/scss/)) {
                        return {
                            test: /\.(sass|scss)$/,
                            loader: 'style-loader!css-loader!sass-loader'
                        };
                    }
                    return loader;
                })

            return baseConfig;
        }
    }
};

示例 - 添加 plugins

var myPluginA = require('myPluginA');
var myPluginB = require('myPluginB');
module.exports = {
    plugins: ['qunar'],
    config: {
        exports: ['./scripts/app.js'],
        modifyWebpackConfig: function(baseConfig) {
            baseConfig.plugins = baseConfig.plugins.concat([
                myPluginA,
                myPluginB
            ])
            return baseConfig;
        }
    }
};

示例 - 设置 alias（引用路径别名）

module.exports = {
    plugins: ['qunar'],
    config: {
        exports: ['./scripts/app.js'],
        modifyWebpackConfig: function(baseConfig) {
            baseConfig.resolve.alias = {
                COMMON: '/src/scripts/common', // 实际使用时 require('COMMON/lib.js')
                UTIL: '/src/scripts/util' // 实际使用时 require('UTIL/dateHandler.js')
            }
            return baseConfig;
        }
    }
};

hooks

YKit 允许项目在打包过程中添加钩子，可在不同的阶段对资源进行处理。所有钩子都支持同步和异步。

调用顺序：beforePack -> beforeCompiling -> afterPack

module.exports = {
    plugins: ['qunar'],
    config: {
        // ...
    },
    hooks: {
        // 打包前回调函数
        beforePack: function(cliParams) {
            // cliParams 指运行命令参数，如 -x 或者 --xxx
            console.log('Do something first!');
        },
        // 编译前回调函数
        beforeCompiling: function(cliParams, webpackConfig) {
            // 在这里可以拿到编译配置 webpackConfig，并进行更改
            console.log('Do something next!');
        }
        // 打包后回调函数
        afterPack: function(cliParams, stats) {
            // 可从 stats 对象拿到编译后数据
            var callback = this.async();
            // 添加异步钩子
            setTimeout(function() {
                console.log('Do sth async after pack!');
                callback();
            }, 1000)
        }
    }
};

server

可对 YKit 本地 server 进行开发效率方面的配置：

module.exports = {
    plugins: ['qunar'],
    config: {
        // ...
    },
    server: {
        hot: true, // 模块热更新，相当于 ykit server --hot，默认 false
        overlay: true, // 开启后可在当前打开的页面提示打包错误，便于调试，默认 false
        maxMiddleware: 5 // 缓存的资源数量，进行该限制主要是为了防止过多冗余模块重新编译，默认为 3
    }
};

commands

YKit 允许你添加自定义命令，功能类似于 npm scripts，添加形式如下：

module.exports = {
    plugins: ['qunar'],
    config: {
        // ...
    },
    commands: [{
        name: 'mycmd',
        module: {
            usage: '输出 “abcde”',
            run: function () {
                console.log('abcde');
            }
        }
    }]
};

此时你就可以在控制台中执行它。

$ ykit mycmd
教程
进阶使用