美文网首页编程实践ES6JavaScript 进阶营
如何在VSCode中用Babel学习ES6

如何在VSCode中用Babel学习ES6

作者: 全栈顾问 | 来源:发表于2019-06-29 20:25 被阅读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

相关文章

  • 如何在VSCode中用Babel学习ES6

    为什么 想学习ES6,就想能够在VSCode的Console中直接运行脚本,这样实验起来方便些,于是就想直接nod...

  • Babel 入门——ES6 转 ES5

    Babel 入门——ES6 转 ES5 原文转载自阮一峰教程 本文讲解如何在 nodejs 环境下使用 babel...

  • web前端各浏览器兼容性问题

    对 ES 语法的支持上 ES6 的兼容问题项目打包的时候 webpack 中用 babel-loader 处理 F...

  • 前端基础

    前言:大概包含六部分VSCode使用、ES6、Node.js、Vue、Babel、WebpackES6类似于Jav...

  • webpack 学习笔记之四 , css-loader

    之前学习了 babel & babel-polyfill .前者又来解决 ES6 -> ES5 语法的转化.后者用...

  • js面试课程

    一、ES6学习 Ⅰ、Babel的使用 Babel是一个JavaScript编译器,主要用于将ECMAScript ...

  • es6—>es5 babel

    index es6—>es5 babel __veblen 前端构建工具,内置解析es6语法,核心在于babel ...

  • ES6 配置运行环境

    本节我们来学习配置 ES6 的 JavaScript 运行开发环境,通过 babel 把 ES6 转码为 ES5 ...

  • 边学边写webpack4 -- 语法降级

    ES6降级ES5 cnpm install babel-loader babel-core babel-prese...

  • babel的安装

    babel是编写js时es6风格转换为es5的编译器,今天尝试了一下安装了一个babel,准备学习一下es6。安装...

网友评论

    本文标题:如何在VSCode中用Babel学习ES6

    本文链接:https://www.haomeiwen.com/subject/fetmcctx.html