开始

开发

如果是 QRN 的项目,需要将 QRN 项目转化为 QRN-Web 项目,通常需要执行以下命令:

  1. # 在 package.json 中添加 qrn-web 依赖
  2. qrn transform
  3. # 启动开发服务器
  4. qrn run -w
  5. # 如果出现错误,通常只需要删除 node_modules/ 再重新执行 qrn install 就可以了
  6. rm -rf node_modules/
  7. qrn install
  8. qrn run -w

qrn run -w 命令有一个 -p —port 的参数,可以指定监听的端口,默认为 8080。

执行该命令以后,会在本地 8080 端口(或者 -p 参数所指定的端口)启动一个 webpack-dev-server,直接在 Chrome 中打开 http://localhost:8080 即可预览(记得打开移动端模拟器)。

编译

编译只需一条命令:

  1. # -w 参数表示进行 QRN-Web 项目编译
  2. qrn pack -w

编译完成后,编译产物会导出在项目根目录的 /dist 目录下,项目中引用的静态资源也会导出到该文件夹中。

如果使用 ykit 发布,会将 /dist 下的资源都导出到 /prd 或者 /dev 中(取决于编译环境),并生成 /ver 文件夹,该文件夹下包含了资源的版本号信息,供前后端关联资源所用。

发布

发布 QRN-Web 项目和使用 ykit 发布其他 qzz 项目基本一致,唯一不同的就是在万事屋里的 ykit 编译脚本需要修改一下。

编译脚本修改

使用 ykit 发布请参考发布到 beta / 线上,仅在万事屋编辑 build_command 的时候需要修改为

  1. npm install --registry http://npmrepo.corp.qunar.com/ && node ./node_modules/qrn-web/scripts/preBuild.js && ./node_modules/.bin/qrn-web build && ykit pack -m -q

编译脚本

所发布的资源

默认会导出一个自动生成的 index.html,其中入口文件引用的资源会被打包成一个 main@[hash].jsreact 以及 react-dom 会被打包为 react-main@[hash].js,除 reactreact-dom 以外的所有 nodemodules 中的模块会被打包至 vendors-main@[hash].js,其余的静态资源(比如字体、图片等)也会被打包,建议从 CDN 加载静态资源,以最大限度提高加载速度_。