在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

留言列表

    发表评论: