编程实践ES6JavaScript 进阶营

如何在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.

参考

@babel/node

上一篇 下一篇

猜你喜欢

热点阅读