将FEkit项目迁移到YKit

下载依赖

迁移所需要的依赖是@qnpm/ykit-config-fekit包:

qnpm i @qnpm/ykit-config-fekit --save

然后包的postinstall脚本会帮你创建ykit.fekit.js到项目根目录下。

和其他ykit项目不同的是你不需要写任何配置项,里面可配置的只有sync到开发机的命令。所有的相关配置都会从fekit.config中读取。

尝试迁移

以下内容非常重要,请仔细阅读后再进行操作

目前不支持的项目类型:

  • 使用了scripts(premin,prepack,postmin,postpack,prepublish)钩子脚本的项目
  • 使用.less文件的项目
  • 使用了.mustache/.handlebar/.hogan文件的项目
  • 各种利用了非常规fekit bug的项目(例如使用注释来require依赖)

以上几类项目目前完全无法迁移,会逐次提供支持,请等待之后版本的ykit-config-fekit。

另外,如果是先使用webpack构建再用FEkit发布的项目,也可以迁移,但是需要手动执行webpack构建过程先生成pack后的文件。

迁移步骤

1. 本地pack

首先请在项目根目录下调用ykit pack -c生成dev文件。然后注意看一下命令行可能出现的报错,例如:

 X ./~/css-loader?-url!./~/@qnpm/ykit-config-fekit/loaders/fekit-scss.js!./src/styles/expcleisure-index.css
Module build failed: Missed semicolon (87:127)

  85 | .b_event_description{ padding-bottom:10px; }
  86 | .b_event_description .e_process{ padding:15px 0 8px 85px; text-align:center; }
> 87 | .b_event_description .e_process li{ margin-left:12px; padding-right:36px; width:158px; display:inline; float:left; background:background:url(http://source.qunar.com/site/images/zhuanti/130424-1/icon.png) no-repeat 100% 44px; }
     |                                                                                                                               ^
  88 | .b_event_description .e_process li.last{ background:none; }
  89 | .b_event_description .e_process .step_01, .b_event_description .e_process .step_02, .b_event_description .e_process .step_03, .b_event_description .e_process .step_04{ width:158px; height:114px; background:url(http://source.qunar.com/site/images/zhuanti/130424-1/step.png) no-repeat 0 0; overflow:hidden; }
  90 | .b_event_description .e_process .step_02{ background-position:0 -125px; }

由于FEkit不会校验css的语法,因此我们发现大部分的项目都存在类似的各种css错误,这在ykit不再被允许,你需要手动修改这些错误以后再尝试迁移。

以上错误只是各种css语法错误中的一种,请仔细阅读错误信息。

另外,在js中也可能出现语法错误,例如:

X ./src/scripts/a/touch/recruitSleeper/index.js
Module not found: Error: Cannot resolve module 'prepareSleeper/index/js' in /Users/chenjiao/Documents/qzz/ugc/src/scripts/a/touch/recruitSleeper
 @ ./src/scripts/a/touch/recruitSleeper/index.js 5:0-34

这个错误对应的源码长这个样子:

require("prepareSleeper/index/js");

这种错误在fekit中也被默默地无视掉了,请参照报错信息进行修改。

请重复以上两个步骤,直到没有报错为止。

2. dev测试

调用ykit sync可以将项目sync到开发机,然后请修改host进行dev测试(这个就不多说怎么弄了)。

最好每个页面都看一下是否有问题。

beta/正式发布

按流程走即可。

支持

请qtalk jiao.shen或者yuhao.ju

已经转化成功的项目列表

注意,以下的项目绝大多数都有上面提到的css语法问题和js引用问题,都是手动修复以后转化成功的:

  • ugc_mall
  • ugc
  • ugchybrid
  • ugc_mall_admin
  • ugc_review_audit
  • ugc_topic
  • trainticket
  • hotel_fekit
  • bnb_fekit
  • bnbhybrid
  • hotel_luxury
  • mice_search_fekit
  • mice_operation_fekit