一分钟入门 Babel(下一代 JavaScript 语法的编译器)
简单来说把 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 语法的编译器)的更多相关文章
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- Babel:下一代Javascript语法编译器
定义 Babel是一个Javascript的编译器,通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法.以便能够在低版本的浏览器或者其它环境平稳运行. 截至目前笔者写这篇文章的时候, ...
- JavaScript 10分钟入门
JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...
- 正则表达式30分钟入门教程<转载>
来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了 ...
- Shell脚本编程30分钟入门
Shell脚本编程30分钟入门 转载地址: Shell脚本编程30分钟入门 什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...
- Objective-C 30分钟入门教程
Objective-C 30分钟入门教程 我第一次看OC觉得这个语言的语法有些怪异,为什么充满了@符号,[]符号,函数调用没有()这个,但是面向对象的高级语言也不外乎类,接口,多态,封装,继承等概念. ...
- 十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))
十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less)) 注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文. 我们知道写css代码是非常枯燥的 ...
- 正则表达式入门教程&&经典Javascript正则表达式(share)
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
随机推荐
- 两数之和II_LeetCode_167_1099
LeetCode_167原题链接:https://leetcode-cn.com/problems/two-sum-ii-input-array-is-sorted/ LeetCode_1099原题链 ...
- python基础练习题(九九乘法表)
又把python捡起来了,动手能力偏弱,决定每日一练,把基础打好! ------------------------------------------------------------------ ...
- C语言超全学习路线(收藏让你少走弯路)
刚入门是否觉得C语言很难?那可能是你还没找到正确的C语言学习路线,收藏以防找不到,让你少走弯路. 基本语法 选择控制语句 if,swith 循环控制语句 while,for 控制语句相关关键字分析 变 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- Linux中的RCU机制
什么是RCU? RCU(Read-Copy Update),顾名思义就是读-拷贝-修改,它是基于其原理命名的.对于被RCU保护的共享数据结构,读者不需要获得任何锁就可以访问它,但写者在访问它时首先拷贝 ...
- 使用allatori混淆代码
引言 为了保密需要,我们开发出来的程序在实际部署之前,需要先将jar包的代码进行混淆,让用户使用反编译也无法获得源码. allatori就是这样一个混淆java jar包代码的工具. 操作步骤 Ste ...
- [题解][YZOJ50074] 小 C 的岛屿
仅仅是对 \(O(n^4)\) 做法的一个记录. 简要题意 有 \(N\) 座岛屿,初始时没有边.每座岛屿都有一个概率值 \(p_i\) 和一个大小为 \(s_i\) 友好列表 \(A_i\) . 小 ...
- HCNP Routing&Switching之RSTP保护
前文我们了解了RSTP相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16240348.html:今天我们来聊一聊RSTP保护相关话题: 我们知道RST ...
- supervisor安装以及监控管理rabbitmq消费者进程
简介:Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启. 1.安装 apt-get install ...
- 【docker】windows 10专业版安装docker
一.开启Hyper-V功能 二.安装 Docker Desktop for Windows(下载地址)[https://www.docker.com/get-started/] 三.安装 Window ...