在Node环境中使用与调试ES6

ES6相信大家都已经在实际项目中使用过了,什么import,export,class已经玩得很溜了。在我们的日常开发中,无论是PC还是H5端使用ES6时都会使用预编译器,如babel,将ES6语法转换成目前主流浏览器环境都有很好支持的ES5语法。从目前来看,相当长一段时间,我们使用ES6都离不开babel这类预编译器。

那么在Node端,目前(2017年8月,node版本v8.2.1)ES6支持又怎么样昵?遗憾的是,即使在Node端,使用ES6也离不预编译器,因为和浏览器端一样,ES6很核心的import, export关键字目前也还没有支持。直接运行包含import关键词的js文件,会报下面的错误

import-error

本文将记录如何配置Node端ES6开发环境,以及如何调度ES6。

配置Node端ES6开发环境

1. 新建工程(es6-node),并生成package.json

npm init

2. 安装babel es6依赖

npm i babel-cli babel-preset-env -D

3. 配置.babelrc

{
  "presets": ["env"]
}

这时候我们的项目目录如下:

proj-dir

4. 新建一个编译命令,帮助编译es6

"start": "babel src -d dist -s inline"

上面命令的意思是编译src里面所有的js文件到dist目录,并生成内联sourceMap

运行npm start后,会有dist目录生成

5. 新建一个调试任务

debug-task-manual

6. 在原文件中(src/hello.js)添加断点,并运行调试

debug

使用babel-register

但是在开发时,我们不可能每次都手动编译。可以使用babel-register解决这个问题

安装babel-register依赖后,通过node_modules/.bin/babel-node.cmd装载我们的入口文件即可。调试结果与前面手动编译体验一样,这样就可以开心的开发调试了

debug-task-auto

chrome调试node

前面的调试方法都是基于webstorm IDE。但不是每个人都使用这个编辑器。那么我们能像调试web开发那样在chrome中调试node吗?答案是可以的,我们可以使用Node-inspector这个工具

webapck预编译

在调试之前,我们使用webpack先预编译要调试的js文件

npm i webpack babel-loader -D
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/hello.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  devtool: 'source-map'
};

新建script命令

"debug": "node-debug dist/bundle.js",
"wp": "webpack -w"

先启动wp任务。需要调试时再运行npm run debug就可以调试了

debug-chrome

这种调试方法,每次调试完,改动源文件后就要再运行一个npm run debug命令,非常不方便。所以,如果做node开发,还是建议使用webstorm这种IDE

留言列表
  • lm:
    数据的预取总是失败,求大佬指教下,实现了个ssr,但是总觉得我实现的ssr不对
      2019年03月15日 16:46 回复
    • ewr:
      eqr
        2018年09月21日 09:17 回复
      • 小王:
        你好,请问一下,官网demo 跑起来了,但是用浏览器http://localhost:8080.一直加载不出来是怎么回事呢?
          2018年09月20日 14:50 回复
        • dk:
          请教博主一点问题,目前我的ssr项目已基本完成开发,但不知如何部署到虚拟服务器centos7中,具体的问题是不懂需要将哪些代码上传到服务器并使用pm2来启动项目.希望博主有空回答下,谢谢.
          • u3xyz:
            你好,其实这个问题与“hp5”的问题有点类似,你可以看下那个回复,理论上构建生成的所有前端资源文件都会用到,都需要放到服务器
            2018年09月11日 21:47
          2018年09月11日 20:18 回复
        • hp5:
          你好,vue-ssr开发基本没什么问题,但是不知道如何部署,希望请教一下,上线部署时,需要将那些文件给后端,希望博主有时间回复一下,谢谢。
          • u3xyz:
            你好,所谓VueSSR,本质是在前后端共用一套js代码,在Node环境下直接吐出页面的过程。SSR一定是在Node环境 ,这个与Java,php等传统后端没什么关系(后端只提供数据接口),也就谈不上要给他们什么文件了,独立部署即可。
            2018年07月25日 10:36
          2018年07月24日 13:10 回复
        • lgf:
          我的项目是vue-cli 然后 实现ssr seo渲染
            2018年07月03日 19:07 回复
          • lgf:
            你好,我现在也是有SEO需求,SSR做,在浏览器打开的时候显示网页源代码可以看到详细的html,增加百度搜索更多的关键子,现在我ssr还是不太能行,用了个prerender-spa-plugin,但是这个插件问题太多,你这篇文章我看了一遍我实现有点困难,(比较菜) 有没有再详细点的教程呢 需求比较着急,所以问问您还有再详细点的demo吗
            • u3xyz:
              推荐多参考官方Demo: https://github.com/vuejs/vue-hackernews-2.0/
              2018年07月25日 10:28
            2018年07月03日 19:05 回复
          • 小白白:
            刚开始研究 我有一个问题 开发过程中我修改代码 就要重新打一次包么?怎么实现热更新啊 希望指点一下
              2018年06月29日 11:40 回复
            • 木メメ木+大:
              你好,发现你的博客的一个现象:比如在第二页点击进入详情,然后按下浏览器返回,就回到第一页,这个是博主刻意为之的吗? 另外特别想请教一下,左右目录联动的实现~
              • u3xyz:
                第一个问题:你是说在第二页的文章返回时默认到了第一页吗?这个不是刻意为之,算小bug吧 第二个问题:可以参看我的文章《如何实现markdown文章标题导航》
                2018年06月28日 12:33
              2018年06月27日 11:46 回复
            • 昌子:
              最近在做ssr,前面过程很顺利,到后面npm run build时,会爆出一个elementUI的样式错误,搞了好几天了还是无头绪,有时间帮忙看下吗?项目急上线
              • u3xyz:
                这个得你自己想办法解决哈
                2018年06月28日 12:31
              2018年06月26日 22:56 回复
            • meme:
              不太懂服务端,骨架屏倒是实现了,ssr看了好多,明白大致流程,就是对服务端不太了解,首先阿里买个云主机,然后你用sheel 连接ssh 登录 起一个www服务器,那么数据库放哪里呢,怎么就线上也能用了?还有node 服务放哪里,还有比如我是node写的接口,怎么弄呢。最近又看了 nginx 是说可以静态资源转发,不太明白其中的流程。期望大佬,写篇文章。或者私信一下。谢谢了
              • u3xyz:
                可以看看文章中的服务器部署模块。我只用了一台阿里云主机,node服务,nginx,数据库都是在这台机器上
                2018年06月28日 12:30
              2018年06月26日 21:10 回复
            • PlainHeart:
              作者,您好,我最近刚开始研究这个,按照您的文档我并不能实现功能,希望在配置上能给予一些更详细的帮助,谢谢!
              • u3xyz:
                首先,得耐心一点,我也不是一下就很顺利得做出来了,那里有问题就想办法解决。此文章也只是列出了关键步骤,并不是所有的步骤。建议多研究官方示例vue-hackernews-2.0,或者试试Nuxt.js
                2018年06月28日 12:28
              2018年06月23日 17:55 回复
            • ljc:
              你好,本人刚接触vue-ssr,开发的时候基本没什么问题,但是不知道如何上线部署,想请教一下,上线部署的时候 ,需要把哪些文件给后端呢,希望博主有时间回复一下
              • u3xyz:
                你好,回复已经单独发qq邮箱(7048***)
                2018年04月21日 00:56
              2018年04月20日 15:33 回复

            发表评论: