如何在VSCode中用Babel学习ES6

为什么

想学习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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。