babel

Posted 2022-08-13 topyang

Babel 转码器

1. .babelrc 存放在项目的根目录下

1. 基本格式

   
     "presets": [],
     "plugins": []
   

2. presets字段设定转码规则
   ```javascript
   # 最新转码规则
   $ npm install --save-dev babel-preset-latest

   # react 转码规则
   $ npm install --save-dev babel-preset-react

   # 不同阶段语法提案的转码规则（共有4个阶段），选装一个
   $ npm install --save-dev babel-preset-stage-0
   $ npm install --save-dev babel-preset-stage-1
   $ npm install --save-dev babel-preset-stage-2
   $ npm install --save-dev babel-preset-stage-3

   
   "presets": [
   "latest",
   "react",
   "stage-2"
   ],
   "plugins": []
   
   ```

   2. 转码

3. 命令行
   ```javascript
   $ npm install --global babel-cli

   # 转码结果输出到标准输出
   $ babel example.js

   # 转码结果写入一个文件
   # --out-file 或 -o 参数指定输出文件
   $ babel example.js --out-file compiled.js
   # 或者
   $ babel example.js -o compiled.js

   # 整个目录转码
   # --out-dir 或 -d 参数指定输出目录
   $ babel src --out-dir lib
   # 或者
   $ babel src -d lib

   # -s 参数生成source map文件
   $ babel src -d lib -s

   ```

4. 将babel-cli安装在项目之中
   ```javascript
   # 安装
   $ npm install --save-dev babel-cli

   #然后，改写package.json。
   
   // ...
   "devDependencies":
   "babel-cli": "^6.0.0"
   ,
   "scripts":
   "build": "babel src -d lib"
   ,
   
   #转码
   $ npm run build
   ```

5. babel-node babel-cli工具自带一个babel-node命令，提供一个支持 ES6 的 REPL 环境
   ``javascript 执行babel-node`就进入 REPL 环境。

   #直接运行 ES6 脚本
   babel-node es6.js

   #babel-node也可以安装在项目中。
   $ npm install --save-dev babel-cli
   #然后，改写package.json。
   
   "scripts":
   "script-name": "babel-node script.js"
   
   
   ```

6. babel-core 调用 Babel 的 API 进行转码

---

本文来源个人对 阮一峰es6 总结，以供今后查阅。