babel安装与基本使用

目录

• Babel概述
• 一、本地安装babel命令
• 二、创建.babelrc文件
• 三、.babelrc文件文件配置
• 四、安装转义器
• 五、配置package.json
• 六、转义
• 七、拓展

Babel概述

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

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

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

本地安装babel命令行工具 — babel官网上主张在项目本地安装babel-cli而不是全局安装

以下所有操作基于manjaro系统

一、本地安装babel命令

>> sudo npm i babel-cli -g

 

二、创建.babelrc文件

 

三、.babelrc文件文件配置

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

四、安装转义器

>> cnpm i --save-dev babel-preset-es2015

 

babel-cli 为babel命令工具，babel-preset-env转义器为真正实现转义的工具，使用哪种转义器还需要配置中进行选择,以下为常用的转义器类型

# ES2015转码规则
babel-preset-es2015
# react转码规则
babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段)，选装一个
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3

五、配置package.json

再script中配置 “build”: “babel src -d dist”，以后运行npm run build 就能直接转义，在dist中就能看到转义后的文件。

另外在script中配置 “build”: “babel src -d dist —presets=es2015” 等价于在.babelrc文件中的”presets”: [“es2015”]。

webpack ，package.json都可以对babel进行配置，因此,babelrc文件不是必须的

 

六、转义

 

七、拓展

一、babel有两种配置文件格式

babel.config.json和.babelrc两者影响范围不同

babel.config.js会影响整个项目中的代码，包含node_modules中的代码

babelrc 只会影响本项目中的代码，不包含node_modules

一般有了babel.config.js 就不会在去执行.babelrc的设置

详情见官网https://babeljs.io/docs/en/config-files/

二、babel转义es6，实际上是将es6代码转换为CommonJs模块规范的es5代码，部分浏览器并不支持CommonJs模块化规范