VSCode调试egg.js项目
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VSCode调试egg.js项目相关的知识，希望对你有一定的参考价值。
参考技术A 首先，在需要调试的地方打好断点如上图，点击左侧的行数，158行就可以打上断点了
点击 vscode 左侧的debug窗口，如果你之前没有配置过 launch.json 文件，那么现实效果就会如下图一样。
点击左上方，【没有配置】，添加配置
VSCode本身就内置了Node.js的调试工具，如果将来你需要调试别的东西，可以在这里选择添加对应的调试插件工具。
这里我们调试的是Node.js，就选择Node.js，然后VSCode会在 /.vscode 目录中新建一个 launch.json 文件
launch.json 文件新建好后，我们需要进行一些配置操作，这里我们选择的是，附加到进程。
后面我们是先启动egg的调试进程，然后再将vscode附加到进程中的。
这里有一个很关键的节点， program 这个属性写的就是你需要调试的js文件，我这边调试的是刚才打上断点的文件 pledges.js
使用 iterm 进入到工程目录，开启调试模式
在VSCode中选择 Attach to Process ，并且选择egg-cluster这个进程。
等请求进入到刚才打断点的地方，VSCode就会自己跳转到调试点啦，然后就可以尽情调试啦~
BTW，如果你有更好，更简单的调试方式请告诉我...
Egg.js 项目中怎么使用前端模板
1、安装插件 egg-view-ejs
npm install egg-view-ejs -save
2、配置插件信息
2.1 config/plugin.js
声明需要用到的插件
module.exports =
ejs:
enable: true,
package: 'egg-view-ejs'
;
2.2 config/config.default.js
配置 ejs：将 view 文件夹下的 .html 后缀的文件，识别为 .ejs。
config.view =
mapping: '.html': 'ejs' // 左边写成.html后缀，会自动渲染.html文件
;
3、创建 view 文件夹
在 app 目录下创建 view 文件夹，并且新建一个 index.html 文件，作为前端模板，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%-title%></title>
</head>
<body>
<!-- 使用 egg-view-ejs -->
<h1><%-title%></h1>
</body>
</html>
4、修改控制层
Egg 约定: ctx.render 默认会去 view 文件夹寻找 index.html。
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller
async index()
const ctx = this;
await ctx.render('index.html',
title: 'kaimo 玩 egg',
);
async user()
const ctx = this;
const userData = await ctx.service.home.user();
ctx.body = userData;
async add()
const ctx = this;
const body = ctx.request.body;
ctx.body = body;
module.exports = HomeController;
5、效果
我们访问 http://127.0.0.1:7001/， 效果如下：
6、拓展
更多参考：【View 模板渲染】，官方文档用的是 egg-view-nunjucks 插件，具体的可以自己去看一下。
以上是关于VSCode调试egg.js项目的主要内容，如果未能解决你的问题，请参考以下文章