前端工程化之:webpack4-1(babel的安装和使用)

一、安装

官网:https://babeljs.io/

民间中文网:https://www.babeljs.cn/

1.babel简介

babel一词来自于希伯来语,直译为巴别塔。

巴别塔象征的统一的国度、统一的语言

而今天的 JS 世界缺少一座巴别塔,不同版本的浏览器能识别的 ES 标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦一样,前端开发也面临着这样的困境。

babel 的出现,就是用于解决这样的问题,它是一个编译器,可以把不同标准书写的语言,编译为统一的、能被各种浏览器识别的语言。

由于语言的转换工作灵活多样, babel 的做法和 postcss 、 webpack 差不多,它本身仅提供一些分析功能,真正的转换需要依托于插件完成。

2.babel的安装

babel 可以和构建工具联合使用,也可以独立使用。

如果要独立的使用 babel ,需要安装下面两个库:

  • @babel/core: babel 核心库,提供了编译所需的所有api
  • @babel/cli:提供一个命令行工具,调用核心库的api完成编译
javascript 复制代码
npm i -D @babel/core @babel/cli

二、babel的使用

1.babel的使用

@babel/cli 的使用极其简单,它提供了一个命令 babel 。

javascript 复制代码
# 按文件编译
babel 要编译的文件 -o 编辑结果文件
// npx babel a.js -o c.js 

# 按目录编译
babel 要编译的整个目录 -d 编译结果放置的目录
// npx bael js -d dist
// npx bael js -d dist -w(实时监控)

2.babel的配置

可以看到, babel 本身没有做任何事情,真正的编译要依托于 babel插件babel预设来完成。

babel 预设和 postcss 预设含义一样,是多个插件的集合体,用于解决一系列常见的兼容问题。

如何告诉 babel 要使用哪些插件或预设呢?需要通过一个配置文件 .babelrc 。

javascript 复制代码
{
    "presets": [],
    "plugins": []
}
相关推荐
明仔的阳光午后4 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
sorryhc5 小时前
Webpack中的插件流程是怎么实现的?
前端·webpack·架构
残冬醉离殇5 小时前
原来dom树就是AST!!!
前端
~无忧花开~5 小时前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js
橙某人5 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
小Pawn爷5 小时前
构建Django的Web镜像
前端·python·docker·django
Sailing6 小时前
🚀🚀 从前端到AI Agent开发者,只差这一篇入门指南
前端·后端·ai编程
草帽lufei6 小时前
轻松上手WSL安装与使用
linux·前端·操作系统
TimelessHaze6 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
长存祈月心6 小时前
Rust 迭代器适配器
java·服务器·前端