Question

我是.Net开发人员和NodeJs的新人。第一点开始学习这个 - this模板。这是最受欢迎的模板。我想要的第一件事 - 在某些IDE中调试代码，因为我已经习惯了IDE（Visual Studio）。 WebTools中的调试非常糟糕。您的服务器代码是使用ES6和Babel编写的。我花了一些时间在IDE中调试它。我选择了Webstorm（最新版本）。

我已使用此类选项生成项目

generator-angular-fullstack | 3.7.2

节点| 5.10.1

npm | 3.8.3

操作系统| Windows 8.1

Transpiler |打字稿

标记|玉

CSS |

路由器| UI-路由器

构建工具|吞

客户端测试|摩卡

DB | MongoDB的

Auth |是的

WebStrom和VisualStudio Code都无法调试ES6。这就是为什么我需要在开发过程中在ES5中转换服务器的原因。我是在.tmpsrv文件夹中完成的。出于这个原因，我在paths中为gulpfile.babel.js对象添加了新变量：

 tmpsrv: '.tmpsrv'

此外，我已经创建了一些gulp任务，并将其添加到gulpfile.babel.js：

中

// web storm tasks

// transiles server in ES5 to .tmpsrv folder
gulp.task('transpile:server:ide', () => {
    return gulp.src(_.union(paths.server.scripts, paths.server.json))
        .pipe(transpileServer())
        .pipe(gulp.dest(`${paths.tmpsrv}/${serverPath}`));
});

// clean .tmpsrv folder
gulp.task('clean:tmpsrv', () => del(['.tmpsrv/**/*'], {dot: true}));

// set 'developmentIde' variable
gulp.task('env:ide', () => {
    plugins.env({
        vars: {NODE_ENV: 'developmentIde'}
    });
});

// prepares all stuff for debugging in WebStorm
gulp.task('serve:ide', cb => {
    runSequence(['clean:tmp','clean:tmpsrv', 'constant', 'env:all','env:ide', 'typings'],
        ['lint:scripts', 'inject', 'jade'],
        ['wiredep:client'],
        ['transpile:client', 'styles','transpile:server:ide'],

        cb);
});

现在，如果我发起gulp:serve:ide任务，则会创建带有已转换客户端的tmp文件夹和带有已转换服务器和源地图的.tmpsrv文件夹（但您现在不应该这样做））。此文件夹中服务器的index.js将是WebStrom中用于调试会话的启动文件（如果我们开始调试ES5代码的会话并在ES6代码中放置断点，则此IDE可以使用源映射调试ES6）。如您所见，我将在调试期间从.tmpsrv文件夹启动我的服务器，这就是我需要修改项目中的一些路径和设置的原因。

首先，我转到server/config/environment/index.js并在all对象中添加此类代码：

// Root path of transpiled server
transpiledRoot: path.normalize(__dirname + '/../../../..'),

比我添加文件＆＃39; developmentIde.js＆＃39;在server/config/express.js' folder and copy contents of server / config / environment / development.js＆＃39;那里。

然后我去`server / config / express.js＆＃39;并替换它：

app.set('views', config.root + '/server/views');

用这个：

if ('development' === env || 'test' === env)
{
  app.set('views', config.root + '/server/views');
}
else
{
  app.set('views', config.transpiledRoot + '/server/views');
}

我也替换了这个：

app.set('appPath', path.join(config.root, 'client'));

用这个：

if('developmentIde' === env){
  app.set('appPath', path.join(config.transpiledRoot, 'client'));
} else{
  app.set('appPath', path.join(config.root, 'client'));
}

我也替换了这个：

if ('development' === env) {
  app.use(require('connect-livereload')({
    ignore: [
      /^\/api\/(.*)/,
      /\.js(\?.*)?$/, /\.css(\?.*)?$/, /\.svg(\?.*)?$/, /\.ico(\?.*)?$/, /\.woff(\?.*)?$/,
      /\.png(\?.*)?$/, /\.jpg(\?.*)?$/, /\.jpeg(\?.*)?$/, /\.gif(\?.*)?$/, /\.pdf(\?.*)?$/
    ]
  }));
}

用这个：

if ('development' === env || 'developmentIde' === env) {
  app.use(require('connect-livereload')({
    ignore: [
      /^\/api\/(.*)/,
      /\.js(\?.*)?$/, /\.css(\?.*)?$/, /\.svg(\?.*)?$/, /\.ico(\?.*)?$/, /\.woff(\?.*)?$/,
      /\.png(\?.*)?$/, /\.jpg(\?.*)?$/, /\.jpeg(\?.*)?$/, /\.gif(\?.*)?$/, /\.pdf(\?.*)?$/
    ]
  }));
}

我也替换了这个：

if ('development' === env || 'test' === env) {
  app.use(express.static(path.join(config.root, '.tmp')));
  app.use(express.static(app.get('appPath')));
  app.use(morgan('dev'));
  app.use(errorHandler()); // Error handler - has to be last
}

用这个：

if ('development' === env || 'test' === env || 'developmentIde' === env) {
  if('developmentIde' === env){
    app.use(express.static(path.join(config.transpiledRoot, '.tmp')));
  } else{
    app.use(express.static(path.join(config.root, '.tmp')));
  }

  app.use(express.static(app.get('appPath')));
  app.use(morgan('dev'));
  app.use(errorHandler()); // Error handler - has to be last
}

所有这些代码使我的调试服务器能够在正确的位置找到客户端内容。此外，我需要为服务器脚本中的每个代码更改转换服务器。这就是为什么我回到gulp文件并替换watch任务中的修改代码的原因。我替换了这个：

plugins.watch(_.union(paths.server.scripts, testFiles))
    .pipe(plugins.plumber())
    .pipe(lintServerScripts())
    .pipe(plugins.livereload());

用这个：

plugins.watch(_.union(paths.server.scripts, testFiles, paths.server.json))
    .pipe(plugins.plumber())
    .pipe(transpileServer())
    .pipe(gulp.dest(`${paths.tmpsrv}/${serverPath}`))
    .pipe(lintServerScripts())
    .pipe(plugins.livereload());

最后，我必须创建Run Configuration，其中启动文件为.tmpsrv\server\index.js，启动任务为gulp:serve:ide（或者您可以手动运行）。此外，您必须为此运行配置设置NODE_ENV=developmentIde。在调试会话期间gulp:watch任务应该有效。一切正常。现在您可以在WebStorm中调试它。但我在NodeJS和gulp的所有东西中都是新手。有人可以看看我的修改并提出更好的解决方案吗？修改，确定ES6调试真的很多东西。我根本不喜欢我的解决方案，我不相信，NodeJS社区还没有发明一些更优雅的解决方案。

在NodeJs和WebStorm

0 个答案: