由于 YKit 是基于 Webpack 的，因此迁移 Webapck 项目只需要原有配置进行迁移。

1. 安装 qunar 插件

在项目中执行

  1. npm i @qnpm/ykit-config-qunar --registry http://registry.npm.corp.qunar.com/ --save

2. 创建 ykit 配置文件

在项目目录下创建一个名为 ykit.js 的配置文件，示例：

  1. module.exports = {
  2.     plugins: ['qunar'],
  3.     config: {
  4.         // ykit 中没有 entry 和 output 的概念，而是使用 export
  5.         // 在本地服务请求时，会实现 /src -> /prd 目录的对应(类似 fekit)
  6.         // 比如请求 /prd/script/index.js，则会编译 /src/script/index.js 并返回编译结果
  7.         exports: ['./scripts/index.js', './styles/index.scss'],
  9.         // 通过 modifyWebpackConfig 可以获取 ykit 基础的 webpack 配置（baseConfig）并进行修改
  10.         // 具体更改哪些配置项参照下方的配置表
  11.         modifyWebpackConfig: function(baseConfig) {
  12.             // ...
  13.             return baseConfig
  14.         }
  15.     }
  16. }

3. 配置 modifyWebpackConfig

modifyWebpackConfig 提供了在 ykit 基础上定制化配置的能力，详见下表：

config 字段环境ykit 默认配置是否支持业务自定义
context-src支持
entry-无支持
output.pathlocalprd不建议自定义
devdev不建议自定义，由开发机指定
prdprd不建议自定义，由发布系统指定
output.filenamelocal[name][ext]支持
dev[name]@dev[ext]支持
prd[name]@[chunkhash][ext]支持
output.chunkFilenamelocal[id].chunk.js支持
dev[id].chunk@dev[ext]支持
prd[id].chunk@[chunkhash][ext]支持
module.loaders-css, sass, less, html, json支持
resolve.alias-无支持
resolve.extensions-.js, .css, .json, .tpl, .string, .scss, .sass, .less支持
devtoollocal & devcheap-source-map支持
pluginsprdUglifyJsPlugin支持

需要注意的是，不同的配置项要根据当前 ykit 默认来选择赋值、追加或者合并操作，以下是简单示例：

  1. exports.config = function() {
  2.     return {
  3.         export: ['./scripts/index.js', './styles/index.scss'],
  5.         // 通过 modifyWebpackConfig 可以获取 ykit 基础的 webpack 配置（baseConfig）并进行修改
  6.         // 具体更改哪些配置项参照下方的配置表
  7.         modifyWebpackConfig: function(baseConfig) {
  9.             // 设置 alias
  10.             baseConfig.resolve.alias = {
  11.                 'Utils': '/src/scripts/utils',
  12.                 'Plugin': '/src/scripts/plugin',
  13.                 'Config': '/src/scripts/config'
  14.             };
  16.             // 追加 loaders
  17.             baseConfig.module.loaders.push ({
  18.                 test: /\.js|jsx$/,
  19.                 exclude: /(node_modules|bower_components)/,
  20.                 loader: 'babel',
  21.                 query: {
  22.                     presets: [
  23.                         'babel-preset-es2015',
  24.                         'babel-preset-react'
  25.                     ]
  26.                 }
  27.             });
  29.             // 更改不同环境的 output.filename
  30.             baseConfig.output.local.filename = '[name][ext]';
  31.             baseConfig.output.dev.filename = '[name]@dev[ext]';
  32.             baseConfig.output.prd.filename = '[name]@[chunkhash][ext]';
  34.             return baseConfig;
  35.         }
  36.     }
  37. };

4. 验证

可针对不同环境，通过本地服务和编译打包资源进行验证

  • local环境: 在项目外执行 (sudo) ykit server，通过本地服务验证资源
  • dev环境: 在项目中执行 ykit pack，资源将被打到 dev 目录下（版本号统一为 @dev）
  • prd环境: 在项目中执行 ykit pack -m，资源将被打到 prd 目录下（带 hash 版本号）