ykit-config-qunar

Features

  • 资源入口从 src 到 dev & prd 的映射
  • 资源 hash 以及 ver 目录结构生成
  • 打包过程中 eslint 检测
  • SASS 和 LESS 编译处理，内置 postcss
  • 同步代码至开发机（ykit sync）

安装

在项目中执行：

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

编辑 ykit.js，引入插件：

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

或者如果需要添加插件的选项，也可以传入一个对象：

  1. module.exports = {
  2.     plugins: [{
  3.         name: 'qunar',
  4.         options: {
  5.             // 插件选项
  6.         }
  7.     }]
  8.     // ...
  9. };

eslint

在编译前执行代码 eslint 检查（如果项目中没有 eslint 配置文件则会自动生成），通过传入 options.eslint 开启：

  1. module.exports = {
  2.     plugins: [{
  3.         name: 'qunar',
  4.         options: {
  5.             eslint: true
  6.         }
  7.     }]
  8.     // ...
  9. };

如果需要的话，也可以通过 options.eslint 传入更多代码检测配置：

  1. module.exports = {
  2.     plugins: [{
  3.         name: 'qunar',
  4.         options: {
  5.             eslint: {
  6.                 env: ['local'] // 只在本地环境进行检测，支持 local、dev、prd
  7.                 // 还支持 fix、cache、formatter 等 eslint 配置
  8.                 // 更多请参考 http://eslint.org/docs/developer-guide/nodejs-api#cliengine
  9.             }
  10.         }
  11.     }]
  12.     // ...
  13. };

postcss(v0.9.0 以上功能)

插件内置了 postcss-loader，如果想使用的话，需要做的就是直接在 modifyWebpackConfig 中添加 postcss 配置。

  1. modifyWebpackConfig: function(baseConfig) {
  2.     baseConfig.postcss = [
  3.         require('autoprefixer')({
  4.             browsers:['last 200 versions']
  5.         })
  6.     ];
  7.     return baseConfig;
  8. }

注意：这里用到了 autoprefixer，你需要提前用 npm 安装在项目中。

sync 命令

sync 命令可将本地 dev 目录下代码上传至指定开发机，以便于联调测试。
由于安全和配置等原因，目前已经不建议使用 sync，请使用 qci 进行前端 dev 发布。文档请参考[联调发布（发布到开发机）][3]。

前置条件

执行 sync 命令之前要确保从本机可直连目标开发机，通过 ssh 命令可验证当前是否可直连，如：

  1. $ ssh yuhao.ju@192.168.237.71

如果没有提示需要密码，而直接登陆至目标开发机，则代表当前已经直连成功。配置直连的方法可以参考该课程的最后一节。

修改配置文件

在 ykit 配置文件中，指定 sync 参数，如：

  1. exports.config = function() {
  2.     return {
  3.         export: [
  4.             //...
  5.         ],
  6.         modifyWebpackConfig: function(baseConfig) {
  7.             // ...
  8.         },
  9.         sync: {
  10.             // 配置 sync 机器的 ip 地址和项目存放路径
  11.             host: "192.168.237.71",
  12.             path: "/home/q/www/qunarzz.com/<project_name>"
  13.             postsync: function() { // 在 sync 成功后执行
  14.                 console.log('sync finished!');
  15.             }
  16.         }
  17.     }
  18. };

执行 sync

在项目中执行：

  1. $ ykit sync

第一次 sync 时会要求输入 qunar user id (如 yuhao.ju)，之后就不必再输了。

错误处理

如果 sync 命令遇到错误，按照以下步骤处理：

  • 检查你的开发机是否可以使用 ssh 直连
  • 检查 user id 是否正确（可以使用 ykit config set user xxx 重新设置，如 ykit config set user yuhao.ju）