开始

开发

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

  1. # 在 package.json 中添加 qrn-web 依赖
  2. qrn transform
  4. # 启动开发服务器
  5. qrn run -w
  7. # 如果出现错误，通常只需要删除 node_modules/ 再重新执行 qrn install 就可以了
  8. rm -rf node_modules/
  9. qrn install
  10. 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].js，react 以及 react-dom 会被打包为 react-main@[hash].js，除 react 和 react-dom 以外的所有 nodemodules 中的模块会被打包至 vendors-main@[hash].js，其余的静态资源（比如字体、图片等）也会被打包，建议从 CDN 加载静态资源，以最大限度提高加载速度_。