【Babel 详细教程】概述，安装，使用，自定义脚本-CFANZ编程社区

【Babel 详细教程】概述，安装，使用，自定义脚本

前言：学习自：https://www.bilibili.com/video/BV1BU4y147pS?p=24

文章目录

一、Babel 概述

1、简介
2、安装

二、使用
三、自定义脚本

一、Babel 概述

1、简介

ES6 的某些高级语法在某些浏览器环境甚至是 Node.js 环境中无法执行，Babel 是一个广泛使用的转码器，可以将 ES6 代码转化为 ES5 代码（原理其实利用就是一个ES6 语法糖至 ES5 语法的映射表作为中介转换，总而将实际代码转换为 ES5 版本），从而在现有的环境中执行运行，这意味着，可以放心使用 ES6 的新语法，而不必担心环境是否支持。

2、安装

Babel提供babel-cli工具，用于命令行转码，安装方式：

cnpm install -g babel-cli

检验是否安装成功

babel --version

【Babel 详细教程】概述，安装，使用，自定义脚本_javascript

二、使用

1、创建一个空文件夹

2、初始化项目

npm init -y

【Babel 详细教程】概述，安装，使用，自定义脚本_npm_02

3、创建目录src，并创建文件 src/example.js ，并使用 ES6 新语法

【Babel 详细教程】概述，安装，使用，自定义脚本_前端_03

4、创建 .babelrc 文件，Babel的配置文件是.babelrc，手动创建在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下

【Babel 详细教程】概述，安装，使用，自定义脚本_npm_04

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

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

5、安装转码器（作为 ES6 新语法到 ES5 语法的映射表），在项目中安装

cnpm install --save-dev babel-preset-es2015

多了一个 node_modules 文件

【Babel 详细教程】概述，安装，使用，自定义脚本_javascript_05

6、转码

（1）在命令行中查看转码后的代码

babel src/example.js

【Babel 详细教程】概述，安装，使用，自定义脚本_命令行_06

（2）将转码后的代码输出到文件

babel src -d dist

【Babel 详细教程】概述，安装，使用，自定义脚本_前端_07

其他指定参数的用法

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
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

三、自定义脚本

【Babel 详细教程】概述，安装，使用，自定义脚本_npm_08

0 条评论