在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文件，会报下面的错误

本文将记录如何配置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"]
}

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

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

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

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

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

5. 新建一个调试任务

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

使用babel-register

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

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

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就可以调试了

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