如何在VSCode中用Babel学习ES6
2019-06-29 本文已影响32人
全栈顾问
为什么
想学习ES6,就想能够在VSCode的Console中直接运行脚本,这样实验起来方便些,于是就想直接node xxx.js来运行。但是执行一些包含ES6特性的脚本时还是会报错,例如:export/import。如果放在浏览器里执行又觉得太麻烦,就尝试了一下如何通过Babel解决这个问题。
Babel是什么
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
我理解Babel就是为了实现用ES6写的脚本能够在实际的环境中运行。
Babel中有个命令行工具,babel-node。它可以给Node.js命令行加上Babel的能力,就是我们需要的执行包含ES6特性的js脚本。
babel-node is a CLI that works exactly the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.
安装Babel及命令行工具
npm install -g @babel/core @babel/cli @babel/preset-env @babel/node
实践
新建目录try-es6,新建文件my-module-es6.js
let myName = "STEAM之旅"
let myAge = 40
let myFn = function() {
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
export { myName, myAge, myFn }
新建文件main-es6.js
import { myName, myAge, myFn } from "./my-es6-module.js"
console.log(myAge) // 40
console.log(myName) // STEAM之旅
console.log(myFn()) // My name isSTEAM之旅! I'm '40years old.
这个时候执行命令babel-node main-es6.js
会语法报错。
新建.babelrc文件
{
"presets": ["@babel/preset-env"]
}
再执行命令babel-node main-es6.js
,运行正确,输出
40
STEAM之旅
My name isSTEAM之旅! I'm '40years old.