简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。严格来说,babel 也可以转化为更低的规范。但以目前情况来说,es5 规范已经足以覆盖绝大部分浏览器,因此常规来说转到 es5 是一个安全且流行的做法。
ES6转ES5(第一种)
初始化项目

npm init --y

安装依赖

npm install babel-cli -D

npm install babel-preset-es2015 -D

在项目中创建并编辑ES6文件

这里只是使用es6的语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。

// src/index.js
let a = 1;

let fun = ()=>{
console.log(a);
}

编辑package.json

我们需要自己在scripts字段里添加命令:

build-t :单独编译某个文件
build-d:把一个文件夹内的所有文件统一编译到另一个文件夹里(文件夹自动生成,不需要自己创建)
build-o:把一个文件夹内的指定文件编译到另外的文件夹里(文件夹需要自己创建,可以指定文件名)

{
“name”: “babel01”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“build-t”:“babel index.js --presets es2015”,
“build-d”: “babel src -d lib --presets es2015”,
“build-o”:“babel src/index.js -o dist/index.js --presets es2015”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“babel-cli”: “^6.26.0”,
“babel-preset-es2015”: “^6.24.1”
}
}

启动编译

npm run <这里是scripts字段的命令>

下面是编译后的es5文件。

“use strict”;

var a = 1;

var fun = function fun() {
console.log(a);
};

ES6转ES5(第二种)

其实跟第一种差不多。
初始化项目

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119836456

一分钟入门 Babel(下一代 JavaScript 语法的编译器)的更多相关文章

  1. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  2. Babel:下一代Javascript语法编译器

    定义 Babel是一个Javascript的编译器,通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法.以便能够在低版本的浏览器或者其它环境平稳运行. 截至目前笔者写这篇文章的时候, ...

  3. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  4. 正则表达式30分钟入门教程<转载>

    来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了 ...

  5. Shell脚本编程30分钟入门

    Shell脚本编程30分钟入门 转载地址: Shell脚本编程30分钟入门 什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...

  6. Objective-C 30分钟入门教程

    Objective-C 30分钟入门教程 我第一次看OC觉得这个语言的语法有些怪异,为什么充满了@符号,[]符号,函数调用没有()这个,但是面向对象的高级语言也不外乎类,接口,多态,封装,继承等概念. ...

  7. 十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))

    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less)) 注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文. 我们知道写css代码是非常枯燥的 ...

  8. 正则表达式入门教程&&经典Javascript正则表达式(share)

    前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...

  9. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

随机推荐

  1. Hyperledger Fabric定制联盟链网络工程实践

    总体来看,网络上成体系的可用的 Fabric 教程极少--不是直接在 Fabric 官网复制内容大谈基础理论就是在描述一个几乎无法复现的项目实践,以至于学习 Fabric 的效率极低,印象最深刻的就是 ...

  2. JavaWeb学习day6-Response初学

    web服务器接收到客户端的http请求,针对这个请求,分别创建一个代表请求的HttpSevletRequest对象,代表响应的一个HttpSevletResponse 如果要获取客户端请求过来的数据, ...

  3. 关于Electron框架应用的安全测试

    Electron框架应用的安全测试 0.Electron相关简介 electron.js是一个运行时框架,它在设计之初就结合了当今最好的Web技术,核心是使用HTML.CSS.JavaScript构建 ...

  4. node.js - 路由、中间件、mysql

    这几天天天搞到这么晚,我看今天的内容看起不多啊,不知道为什么学着学着就到了这么晚.今天的内容还是有点多哈,有点自我矛盾了,再次一一道来. 1. 首先今天先看到路由的概念,什么叫做路由? 路由就是映射关 ...

  5. Java并发编程扩展(线程通信、线程池)

    之前我说过,实现多线程的方式有4种,但是之前的文章中,我只介绍了两种,那么下面这两种,可以了解了解,不懂没关系. 之前的文章-->Java并发编程之多线程 使用ExecutorService.C ...

  6. springmvc03-restful和控制器

    一.控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. 在Spring MVC中一个控制器类可以包含 ...

  7. .NET桌面程序应用WebView2组件集成网页开发3 WebView2的进程模型

    系列目录     [已更新最新开发文章,点击查看详细] WebView2 运行时使用与 Microsoft Edge 浏览器相同的进程模型. WebView2 运行时中的进程 WebView2 进程组 ...

  8. 从零开始,开发一个 Web Office 套件(16):拖动控制点,调整编辑器大小

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  9. [题解] [AGC024F] Simple Subsequence Problem

    题目大意 有一个 01 串集合 \(S\),其中每个串的长度都不超过 \(N\),你要求出 \(S\) 中至少是 \(K\) 个串的子序列的最长串,如果有多解,输出字典序最小的那组解. 由于 \(S\ ...

  10. 谁动了我的主机? 之活用History命令

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Linux系统下可通过history命令查看用户所有的历 ...