babel转码器

简介: babel转码器

一、简介


Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。

这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。


二、安装


这个安装之前要先初始化项目


npm init -y

安装命令行转码工具

Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:


npm install --global babel-cli
#查看是否安装成功
babel --version

三、Babel的使用


1、初始化项目


npm init -y

2、创建文件


src/example.js


下面是一段ES6代码:

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input

2、配置.babelrc


Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下。


{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则,将es2015规则加入 .babelrc:

{
    "presets": ["es2015"],
    "plugins": []
}

3、安装转码器


在项目中安装

npm install --save-dev babel-preset-es2015

4、转码

# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
相关文章
|
4月前
|
前端开发
在 Vite 中使用 CSS 预处理器的优势是什么?
在 Vite 中使用 CSS 预处理器的优势是什么?
|
5月前
|
自然语言处理 前端开发 JavaScript
postcss 单独不转换_postcss
【8月更文挑战第13天】
90 9
|
5月前
|
前端开发 JavaScript 编译器
Vite中预处理器(如less)的配置
【8月更文挑战第2天】Vite中预处理器(如less)的配置
650 4
|
8月前
|
编解码 JSON JavaScript
babel的学习
babel的学习
49 0
|
自然语言处理 前端开发 JavaScript
Babel 的工作原理以及怎么写一个 Babel 插件
Babel 的工作原理以及怎么写一个 Babel 插件
225 0
|
编解码 前端开发
ES6学习(一)— Babel转码器的使用和配置
ES6学习(一)— Babel转码器的使用和配置
|
JavaScript 前端开发 编译器
🎖️使用 esbuild 简化 TypeScript 构建并跳过 tsc/tsx
JavaScript 生态系统一直在不断创新,最近的一位游戏规则改变者是 esbuild,这是一个极速的 JavaScript 和 TypeScript 打包器。
1092 0
|
JavaScript API
十问babel,用最简单的话说清楚babel(二)
十问babel,用最简单的话说清楚babel
114 0
|
Web App开发 移动开发 JavaScript
十问babel,用最简单的话说清楚babel(一)
十问babel,用最简单的话说清楚babel
304 0
|
Rust 编译器 Go
你真的了解ESM吗?
模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下,模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
168 0

热门文章

最新文章

下一篇
开通oss服务