Babel 学习与使用

JavaScript在不断的发展，各种新的标准和提案层出不穷。许多使用JavaScript开发的产品，具体点，那就以浏览器为代表吧！产品肯定是落后于实现标准的，这就导致许多新的JavaScript特性无法被兼容，明明那么方便简洁特性，却用不上，这是不能被接受的。

Babel 核心概念

Babel 是什么

Babel是一个JavaScript编译器，也是一个工具链，集成了众多的插件和工具。

Babel 主要将 ECMAScript 2015+ （ES6+）版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。简单点理解就是，通过应用Babel可以让开发者在跟不上JavaScript新标准的环境中用上JavaScript新标准语法特性。

注意：使用babel进行es6转es5时，转化之后默认是严格模式

Babel 实际做了什么

语法转换
箭头函数，扩展运算符等
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
有些ES6最新api，比如像Promise、Generator、Symbol，目标运行环境（常见：浏览器）还没有普遍提供实现，babel借助core-js对可以自动给js代码添加polyfill，以便最终在浏览器运行的代码能够正常使用那些api；babel始终能提供对最新es提案的支持；
源码转换 (codemods)
如：react框架普遍使用JSX语法来编写模板，当然vue框架也可以使用 jsx，借助babel，jsx也能被正确地转换为ES代码；

开箱即用的babel什么也不做。babel需要配置后才能生效， babel的功能都是通过plugin来完成的。

babel7.x中 @babel 是什么含义

从babel7.0开始，babel系列的包都以 @babel开头，这个跟babel没关系，是npm包的一种形式。@符号是一个限定符，便是一个范围限定，表明包的身份主体。以@开头的npm包，一定是官方自己推出或者官方认可推出的包，比较有权威性质。

babel7 -：

npm install babel-cli babel-core -D

babel7 +：

npm i @babel/cli @babel/core -D

Plugins

babel的功能都是通过plugin来完成的。只是安装babel，不做配置，那将毫无意义！

在使用插件之前，有必要了解下babel的核心包和命令行工具。

@babel/core

核心，肯定要装上的！主要是对代码进行转换的核心方法。

@babel/cli

cli全称command-line interface，译为命令行接口。@babel/cli就是babel带有的内置cli，可以用来让我们从命令行来编译我们的文件。

借助这两个工具包，可以创建基本的babel实验环境了。

创建一个简单的babel例子

1.初始化项目

mkdir babel_study
cd babel_study
npm init -y

2.安装@babel/cli @babel/core

把babel的核心库以及babel的命令行管理工具babel-cli安装到项目的（开发环境）依赖里面。

npm i @babel/cli @babel/core -D
//等价
//npm install @babel/cli @babel/core --save-dev

3.书写代码

在根目录下新建两个文件夹 src 和 dist 分别用来存放资源文件和产出文件

在 src 目录下创建 index.js 并写入以下代码：

//  src/index.js
let foo = () =>{}

4.配置和安装插件

在根目录创建babel.config.js（babel默认配置文件）

安装箭头函数插件

npm i @babel/plugin-transform-arrow-functions -D

配置箭头函数插件

const plugins=["@babel/plugin-transform-arrow-functions"]
module.exports={plugins}

5.启动测试babel

//方式一 整个src目录的js文件都使用插件转码并输出到dist目录下
npx babel src  --out-dir  dist//方式二 指定某文件输出到某个目录下并重新命名
npx babel .\src\index.js  --out-file  .\dist\index_babel.js

还有一个很好用的参数 --watch，可以实时监测js文件的改变并输出，会占据终端进程

npx babel .\src\index.js  --watch  --out-file  .\dist\index_babel.js

查看 dist 目录下的产出文件

let foo = function () {};

包含有 let关键字，说明用的插件并不具备let声明转码的功能，所以当我们选择自己配置插件，来进行代码转换的时候，就得对自己所需的插件非常清楚才行。

插件名称说明

从babel7开始，babel所有的包，不仅是plugin的包，还有preset的包，都全部变为了@babel这个形式的限定包。

几个常用插件：
@babel/plugin-transform-arrow-functions 用于箭头函数转码
@babel/plugin-transform-block-scoping 块级作用域转码
@babel/plugin-transform-for-of for-of循环转码

Babel 学习与使用相关推荐

Babel学习之基础学习
Babel学习一.简介 1. Babel是什么? 2. 整体介绍二.presets(环境预设) 常用的环境预设包三.plugins(插件) 一.简介 1. Babel是什么? Babel是一个编 ...
Babel 学习日记（0）
作者:商见曜来源:恒生LIGHT云社区作为现代前端项目必备的一种技术,Babel 是一个编译器,用于将前沿的 JS 语法转换为浏览器支持的语法.接下来就让我们一起深入学习一下吧. Babel 的介 ...
babel 学习笔记
<Babel 插件通关秘籍>学习笔记核心概念 babel 的编译流程 parser traverse(不含path) traverse(包含path) traverse -- scope ...
React+Webpack+Eslint+Babel构建React脚手架
React+webpack+Eslint+Babel构建React脚手架参考网上文章,说的不是很全,想自己写一篇来巩固知识点,脚手架源码参考阮一峰老师的Github 所用技术栈 React Babe ...
webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载
webpack学习之旅文章目录 webpack学习之旅 webpack基础打包认识webpack 脚手架依赖webpack webpack是什么 Vue项目加载的文件有哪些 webpack使用前提 ...
Babel 7 基础入门学习（详细版）
可以在我的GitHub上下载示例代码. 前言之前一直想要系统的学习一下Babel的使用规则,看过阮一峰老师的<Babel基础入门>,无奈此教程是2016年出的,而Babel 7都已经出来 ...
ES6学习（一）— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
CADD课程学习（9）-- 不同类型分子结构转换(Open Babel)
CADD课程学习(9)-- 不同类型分子结构转换(Open Babel) Open Babel:各种化学结构类型转换 http://openbabel.org/wiki/Main_Page Open ...
JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用
本文摘自阮一峰老师的<ECMAScript 6入门>,原文地址:http://es6.ruanyifeng.com/#docs/intro ECMAScript 6 是一个泛指,含义是5. ...

Babel 学习与使用

Babel 学习与使用相关推荐

最新文章

热门文章