ES6代码转ES5教程(babel安装使用教程)

悠悠 2022-11-26 08:47 155阅读 0赞

# 需要用到的软件 #

Node.js + babel

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

// 转码前
    input.map(item => item + 1);
    
    // 转码后
    input.map(function (item) { 
      return item + 1;
    });

# 进入正题，安装babel(安装之前请确保你已安装了node.js) #

**babel建议在项目中安装，不建议全局安装；**  
选择项目目录或新建一个目录，如E:/wwwroot/babel\_test  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjA2NDAw_size_16_color_FFFFFF_t_70]  
**安装命令：**

npm install --save-dev @babel/core

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。  
该文件用来设置转码规则和插件，基本格式如下。

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

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 最新转码规则
    $ npm install --save-dev @babel/preset-env
    
    # react 转码规则
    $ npm install --save-dev @babel/preset-react

然后，将这些规则加入.babelrc。

{ 
        "presets": [
          "@babel/env",
          "@babel/preset-react"
        ],
        "plugins": []
      }

注意，以下所有 Babel 工具和模块的使用，都必须先写好.babelrc。

# 命令行转码 #

Babel 提供命令行工具@babel/cli，用于命令行转码。

它的安装命令如下。

npm install --save-dev @babel/cli

基本用法如下。

# 转码结果输出到标准输出
    $ npx babel example.js
    
    # 转码结果写入一个文件
    # --out-file 或 -o 参数指定输出文件
     npx babel example.js --out-file compiled.js
    # 或者
     npx babel example.js -o compiled.js
    
    # 整个目录转码
    # --out-dir 或 -d 参数指定输出目录
     npx babel 源目录 --out-dir 转后目录
    # 或者
     npx babel 源目录 -d 转后目录
    
    # -s 参数生成source map文件
     npx babel 源目录 -d 转后目录 -s

如果觉得麻烦还可以通过网上[在线转换1][1] ，[在线转换2][2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjA2NDAw_size_16_color_FFFFFF_t_70]: /images/20221124/5620e245915c4e79935cf0e040029635.png
[1]: https://babeljs.io/
[2]: https://www.babeljs.cn/