yoda-xiss项目说明

阿里

国际信息流运营后台yoda-xiss项目说明

下载

$ git clone git@gitlab.alibaba-inc.com:NewBee/yoda-xiss.git

安装

• 安装tnpm
  tnpm是阿里内部私有npm管理仓库，很多内部项目库只有使用tnpm仓库才行安装，所以安装tnpm很有必要。
  $ npm install tnpm -g --registry=http://r.npm.alibaba-inc.com

• 安装依赖包
  $ cd yoda-xiss && tnpm install

启动

package.json文件已经在scripts中定义启动命令，直接启动即可：$ npm run dev

ps: windows用户可能无法通过npm run dev完整地启动项目，因为windows命令控制台不认识&，那么我们可以分别启动，比如：先启动$ npm run dev（启动项目），再新开一个命令窗口启动$ npm run dev:yoda(运行webpack)

访问

启动之后就可以通过http://localhost:5000/访问yoda运营后台。

调试

新来的童鞋想尽快熟悉和上手项目代码，调试工具很重要，不然看一行行看源码真的好累，效率还不高。下面介绍几种调试方式。

• console.log

这种方式最简单，简单的调试可以使用，但是运行复杂的项目就有点蛋疼，效率太低。

• debugger

这种方式如果不借助其他工具，只支持前端代码调试，不支持后端代码，但是我们运营后台这么多nodejs的后端代码，怎么能没有调试呢，这种方式也不太靠谱。

• node-inspector

这是一款很强大的调试工具，主要是借助chrome来做实现nodejs代码的调试。

不熟悉的童鞋先看一下node-inspector的教程。
首先，启动一个node-inspector服务 $ node-inspector &
然后，启动项目文件 $ node --debug-brk app/index.js
或者，用一条命令代替上面两条命令 $ node-debug app/index.js

然后打开chrome通过http://127.0.0.1:8000/?port=5858访问调试代码。

当然，egg的启动调试远没这么简单，因为egg会启动3个进程，分别是master、agent和worker。

指定port=5858只能调试master进程的代码，因为master进程默认监听5858端口。
如果要调试agent进行的代码，需要打开http://127.0.0.1:8000/?port=5856进行调试，因为agent进程启动指定的是5856端口。
调试worker进程则要访问http://127.0.0.1:8000/?port=5859

如果对egg的启动原理感兴趣，可以去读读egg的源码，或者看看别人的分析吧：egg 源码学习

• vscode

了解了上面几种调试方式，是不是还是觉得很难用呢！？下面介绍终极武器——vscode。

1. 打开vscode，点击调试(就是长得很像蜘蛛的那个按钮)，切换到调试界面
2. 点击打开launch.json，如果第一次打开就会生成一份launch.json文件
3. 编辑launch.json配置文件

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    {
        "name": "Start Egg",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/app/index.js",
        "cwd": "${workspaceRoot}",
        "runtimeArgs": [
        "--debug"
        ],
        "port": 5858
    },
    {
        "name": "Attach Agent",
        "type": "node",
        "request": "attach",
        "port": 5856
    },
    {
        "name": "Attach Worker",
        "type": "node",
        "request": "attach",
        "port": 5859
    }
    ],
    "compounds": [
    {
        "name": "Debug Egg",
        "configurations": ["Start Egg", "Attach Agent", "Attach Worker"]
    }
    ]
}

• 启动Debug Egg便可以进行调试了

如果遇到相关问题，可以参考一下这篇文章：使用 vscode@1.6 断点调试 egg cluster

eslint安装

项目代码规范通过eslint检查，如果代码不符合eslint规范，则无法提交。如果不借助工具，我们的编码的过程中很难保证每一行代码都符合规范，如果等到提交代码的时候再去修正代码错误，那将会非常的痛苦，简直是噩梦。下面我们来学习一下两大主流编辑器eslint的安装。

• sublime text3

  1. 安装eslint插件
     Packages Control: Install packgaes > eslint

  2. eslint配置
     References > Package settings > ESlint > Setting User

     {
       "node_path": "D:/Program Files/nodejs",
       "node_modules_path": "%APPDATA%/npm/node_modules",
       "config_file": "D:/newbee/yoda-xiss/.eslintrc.js"
     }

  3. 安装依赖
     $ npm install -g eslint eslint-config-standard eslint-plugin-promise eslint-plugin-react eslint-plugin-standard babel-eslint

  4. 运行检查
     右键 > ESLint 或者[ctrl + alt + e]使用快捷键

• vscode

  1. 安装eslint插件
     扩展：安装扩展 > eslint

  2. eslint配置

     {
     "node_path": "D:/Program Files/nodejs",
     "node_modules_path": "%APPDATA%/npm/node_modules",
     "config_file": "D:/newbee/yoda-xiss/.eslintrc.js"
     }

  3. 安装依赖
     npm install -g eslint eslint-config-standard eslint-plugin-promise eslint-plugin-react eslint-plugin-standard babel-eslint

  4. 运行检查
     vscode中ESLint自动检查

完