都看到这里了,我就不写什么node环境安装之类的了。

直接从新建项目文件夹后开始吧!

安装依赖:

命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo)

  • npm init –y  // 创建package.json
  • npm install @babel/core @babel/cli @babel/preset-env  //安装所需babel

依赖说明:

@babel/core:是整个功能中最核心的模块。core就是核心的意思。

里边的一个核心功能就是transform,把js代码编程抽象语法树AST。只要变成抽象语法树后,后期的插件才能根据这个抽象语法树进行降级,转成es5。

以上其主要功能是提供抽象语法树,但是不提供降级,进行降级转换es5语法的话还需要其他一个插件:
@babel/preset-env:是一个插件集合,里边集成了很多插件,比如专门解析let、专门解析箭头函数等的插件。他具备把所有的es6的语法都转成es5的能力,但是此能力也依赖babel/core

把写的es6语法真正转成es5,需要一个指令去找到这个文件,编译转换后输出新的文件,就需要这个脚手架。

@babel/cli:也是一个工具,通过命令行对js文件进行换码。可以让你通过npx指令执行对应命令。

此时,执行npx babel
es6.js -o es5.js,就能把es6语法转换为es5的格式。他的工作原理是通过node_modules/.bin/bable入口文件进行编译。

配置文件:

如果上边两个都没问题了,就在package.json同级目录下新建文件: .babelrc

配置如下:

配置文件说明:

  1. .babelrc是一个json对象文件。
    1. 是一个严格的json文件,key必须用双引号包裹。
  1. presets:预设,数组、预设插件集合,实时增加。
    1. "@babel/preset-env": babel处理插件之一

编译es6文件,测试:

新建test.js文件,写上es6命令

运行npx babel test.js –o demo.js 

编译成功后,查看输出的demo.js

使用监听:

运行命令:npx babel test.js –o demo.js --watch

然后我在左边编译test,保存右边就能输出demo,真棒

ES6 - Babel编译环境搭建的更多相关文章

  1. ES6初探——编译环境搭建

    不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...

  2. ES6+Webpack+Babel基本环境搭建

    ### 本文基本是流水文,记录学习中步骤,希望对看到的你有用,蟹蟹. 基本环境搭建 技术栈 Webpack ES6 Babel 开发环境 VS Code Node 搭建环境过程 新建项目文件夹

  3. ES6的开发环境搭建

    在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...

  4. 一.ES6的开发环境搭建

    前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...

  5. ubuntu12.04下安卓编译环境搭建总结

    前言:      因为工作需要,经常要编译安卓下的动态库,公司有已经搭建好环境的服务器,但是第一自己想自己搭建一下了解一个整个过程,另外,公司的服务器也经常出现问 题,导致编译不了,所以就想自己搭建环 ...

  6. windows下cocos2dx3.0开发环境及Android编译环境搭建

    cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1.  所需工具         1)coc ...

  7. Emscripten编译环境搭建--将C和C++编译成JS

    Emscripten编译环境搭建--将C和C++编译成JS 需求:linux环境下用js执行c.c++文件,使用emscirpten编译器 目标:搭建好Emscripten环境 环境:Ubuntu16 ...

  8. openwrt(一):openwrt源码下载及编译环境搭建

    声明:从网上各位大神的博客学习,整理后记录,非原创. 注:请用非root用户来下载源码 导航: 1. openwrt编译环境搭建 2. openwrt源码下载 3. feeds更新 1. openwr ...

  9. IoT设备程序开发及编译环境搭建初体验

    引言 Mirai事件一经曝出,立即引领了一轮研究IoT设备的热潮.目前,对Mirai的报告大多只是在对其功能实现上的介绍,却很少提及如何实现IoT设备程序开发的测试环境.本文在对Mirai的源码研究的 ...

随机推荐

  1. 笔记-ORM-sqlalchemy

    笔记-ORM-sqlalchemy 1.      ORM 1.1.    ORM框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发 ...

  2. aspx页面 按钮不响应回车键

    aspx页面在IE浏览器中,页面上的按钮默认都响应回车键,但有的时候我们的文本框可能需要响应回车键,这时我们就不想让按钮再响应回车键,这时我们只需要设置按钮的属性即可. 按钮分为两种,一种是<b ...

  3. PHP.21-商品信息管理

    商品信息管理 在线增删改查和图片信息管理 主要技术:文件上传.图片缩放.数据库基本操作 思路: 1.设计并创建数据库 库名:demodb 表名:goods 编号(id) 名称(name) 商品类型(t ...

  4. DOS程序员手册(十二)

    DOS可安全使用 610页 在DOS控制台I/O操作进行轮询循环时,有规律地调用中断,以便允许终止 并驻留(TSR)程序(如适用于DOS的实用程序PRINT.COM),知道它可安全 地使用文件操作和其 ...

  5. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  6. webdriver--设置元素等待

    sleep():脚本执行到某一位置时“睡一会”,再继续执行:参数的单位是s:sleep方法由python的time模块提供,有两种引入和使用方式 import time time.sleep(5) f ...

  7. NOIP2018 集训(二)

    A题 神炎皇 问题描述 神炎皇乌利亚很喜欢数对,他想找到神奇的数对. 对于一个整数对 \((a,b)\) ,若满足 \(a+b\leq n\) 且 \(a+b\) 是 \(ab\) 的因子,则称 为神 ...

  8. python小结

    c:\python33添加到你的PATH 环境变量中,你可以在DOS 窗口中 输入以下命令:set path=%path%;C:\python33 id() 方法的返回值就是对象的内存地址. 在#! ...

  9. KMP与循环节相关题目

    HDU 3746 Cyclic Nacklace ( KMP求最小循环节 ) len - nextval[len]即为最小循环节长度. #include <cstdio> #include ...

  10. HDU 4731 Minimum palindrome (找规律)

    M=1:aaaaaaaa…… M=2:DFS+manacher, 暴出N=1~25的最优解,找规律.N<=8的时候直接输出,N>8时,头两个字母一定是aa,剩下的以aababb循环,最后剩 ...