配置

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

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

plugins

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

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

  1. $ npm install --save ykit-config-yo

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

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

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

config.exports

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

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         // 基于当前源代码目录，默认为 "src"
  5.         exports: [
  6.             './scripts/index.js', // 引入 <project_path>/src/scripts/index.js
  7.             './styles/index.scss' // 引入 <project_path>/src/styles/index.scss
  8.         ],
  9.     }
  10.     // ...
  11. };

在 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 的输出路径：
  1. config.output.prd.path = 'dist';

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

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

示例 - 添加 loaders

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         exports: ['./scripts/app.js'],
  5.         modifyWebpackConfig: function(baseConfig) {
  6.             baseConfig.module.loaders.push({
  7.                 test: /\.mustache$/,
  8.                 loader: 'mustache'
  9.             })
  10.             return baseConfig;
  11.         }
  12.     }
  13. };

注意使用该方法时尽量对配置项（loaders 或者 plugins 等）进行追加和合并操作，而不要覆盖掉原有配置。

示例 - 替换 loaders

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

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         exports: ['./scripts/app.js'],
  5.         modifyWebpackConfig: function(baseConfig) {
  6.             // 替换处理 scss 原有的 loader
  7.             baseConfig.module.loaders = baseConfig.module.loaders
  8.                 .map(function (loader) {
  9.                     if (loader.test.toString().match(/scss/)) {
  10.                         return {
  11.                             test: /\.(sass|scss)$/,
  12.                             loader: 'style-loader!css-loader!sass-loader'
  13.                         };
  14.                     }
  15.                     return loader;
  16.                 })
  18.             return baseConfig;
  19.         }
  20.     }
  21. };

示例 - 添加 plugins

  1. var myPluginA = require('myPluginA');
  2. var myPluginB = require('myPluginB');
  3. module.exports = {
  4.     plugins: ['qunar'],
  5.     config: {
  6.         exports: ['./scripts/app.js'],
  7.         modifyWebpackConfig: function(baseConfig) {
  8.             baseConfig.plugins = baseConfig.plugins.concat([
  9.                 myPluginA,
  10.                 myPluginB
  11.             ])
  12.             return baseConfig;
  13.         }
  14.     }
  15. };

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

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         exports: ['./scripts/app.js'],
  5.         modifyWebpackConfig: function(baseConfig) {
  6.             baseConfig.resolve.alias = {
  7.                 COMMON: '/src/scripts/common', // 实际使用时 require('COMMON/lib.js')
  8.                 UTIL: '/src/scripts/util' // 实际使用时 require('UTIL/dateHandler.js')
  9.             }
  10.             return baseConfig;
  11.         }
  12.     }
  13. };

hooks

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

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

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         // ...
  5.     },
  6.     hooks: {
  7.         // 打包前回调函数
  8.         beforePack: function(cliParams) {
  9.             // cliParams 指运行命令参数，如 -x 或者 --xxx
  10.             console.log('Do something first!');
  11.         },
  12.         // 编译前回调函数
  13.         beforeCompiling: function(cliParams, webpackConfig) {
  14.             // 在这里可以拿到编译配置 webpackConfig，并进行更改
  15.             console.log('Do something next!');
  16.         }
  17.         // 打包后回调函数
  18.         afterPack: function(cliParams, stats) {
  19.             // 可从 stats 对象拿到编译后数据
  20.             var callback = this.async();
  21.             // 添加异步钩子
  22.             setTimeout(function() {
  23.                 console.log('Do sth async after pack!');
  24.                 callback();
  25.             }, 1000)
  26.         }
  27.     }
  28. };

server

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

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

commands

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

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         // ...
  5.     },
  6.     commands: [{
  7.         name: 'mycmd',
  8.         module: {
  9.             usage: '输出 “abcde”',
  10.             run: function () {
  11.                 console.log('abcde');
  12.             }
  13.         }
  14.     }]
  15. };

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

  1. $ ykit mycmd