【编译技术】:Babel——基础的基础
时间:2022-07-28
本文章向大家介绍【编译技术】:Babel——基础的基础,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
目录
1. Babel 是什么?
2. Babel 能干什么?
3. Babel 核心构成
4. 一个小 Demo
1. Babel 是什么?
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
2. Babel 能干什么?
Babel 能为你做的事情:
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性
- 源码转换 (codemods)
示例:ES2015 语法转换
示例:JSX 语法转换
示例:TypeScript 语法转换
3. Babel 核心构成
- @babel/core:The core functionality of Babel resides at the @babel/core module.
- @babel/cli:Babel comes with a built-in CLI which can be used to compile files from the command line.
- @babel/plugin-*:Transformations come in the form of plugins, which are small JavaScript programs that instruct Babel on how to carry out transformations to the code.
- @babel/preset-*:Presets can act as an array of Babel plugins or even a sharable options config.
- @babel/register:One of the ways you can use Babel is through the require hook. The require hook will bind itself to node's require and automatically compile files on the fly.
- core-js:Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2020: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript proposals, some cross-platform WHATWG / W3C features and proposals like URL. You can load only required features or use it without global namespace pollution.
4. 一个小 Demo
安装依赖:
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-typescript
配置Babel(babel.config.json):
{
"presets": [
"@babel/env",
"@babel/react",
"@babel/preset-typescript"
]
}
scripts:
babel src --out-dir lib
scripts:
参考:
babel 官网: https://babeljs.io/docs/en/
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
- CSS魔法堂:重拾Border之——解构Border
- Angular企业级开发(7)-MVC之控制器
- Angular企业级开发(8)-控制器的作用域
- 使用jQuery Draggable和Droppable实现拖拽功能
- CSS魔法堂:重拾Border之——图片作边框
- Mobile Web中URL设计问题
- 使用root用户连接Ubuntu16.04时,提示SSH连接被拒绝
- CSS魔法堂:Box-Shadow没那么简单啦:)
- java操作redis: 将string、list、map、自定义的对象保存到redis中
- 运行第一个Docker容器-Docker for Web Developers(1)
- 手动实现jQuery Tools里面tab功能
- Angular企业级开发(9)-前后端分离之后添加验证码
- 基于thrift的微服务框架
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法