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。
npm init
npm i babel-cli babel-preset-env -D
{
"presets": ["env"]
}
这时候我们的项目目录如下:
"start": "babel src -d dist -s inline"
上面命令的意思是编译src里面所有的js文件到dist目录,并生成内联sourceMap
运行npm start后,会有dist目录生成
但是在开发时,我们不可能每次都手动编译。可以使用babel-register解决这个问题
安装babel-register依赖后,通过node_modules/.bin/babel-node.cmd装载我们的入口文件即可。调试结果与前面手动编译体验一样,这样就可以开心的开发调试了
前面的调试方法都是基于webstorm IDE。但不是每个人都使用这个编辑器。那么我们能像调试web开发那样在chrome中调试node吗?答案是可以的,我们可以使用Node-inspector这个工具
在调试之前,我们使用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'
};
"debug": "node-debug dist/bundle.js",
"wp": "webpack -w"
先启动wp任务。需要调试时再运行npm run debug就可以调试了
这种调试方法,每次调试完,改动源文件后就要再运行一个npm run debug命令,非常不方便。所以,如果做node开发,还是建议使用webstorm这种IDE
发表评论: