Babel——ES6转换

最新推荐文章于 2024-10-12 20:04:25 发布

hawkey7

最新推荐文章于 2024-10-12 20:04:25 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端自动化构建工具 ES6 文章标签： plugins Babel

本文链接：https://blog.youkuaiyun.com/weixin_40821790/article/details/78683873

ES6 同时被 2 个专栏收录

3 篇文章

订阅专栏

前端自动化构建工具

2 篇文章

订阅专栏

本文介绍了如何使用Babel将ES6代码转换为浏览器兼容的JavaScript。从在线转换工具到手动配置Babel-cli，再到使用Babel-node执行转换，以及Babel-register实现运行时转换，详述了Babel的核心功能。同时提到了Babel-polyfill，用于处理浏览器不支持的新API。在实际应用中，为避免性能问题，建议在生产环境中使用预转码的脚本。

1. 在线转换 https://babeljs.cn/
2. 手动转换Babel-cli
首先 npm -init

**1）配置.Babelrc文件** 
{
  "presets": ["latest"],
  "plugins": []
}
// es2015转码规则
npm install --save-dev babel-preset-es2015

// react转码规则
npm install --save-dev babel-preset-react
//react最新转码规则
npm install --save-dev babel-preset-latest

// ES7不同阶段语法提案的转码规则（共有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

**2 ) 安装 babel-cli 工具，用于命令行转码**
npm install --global babel-cli

**3) 执行转码**  
babel example.js -o compile.js --presets es2015

**4） 实时监听编译文件：**
$ babel example.js --watch -o compiled.js --presets es2015

3. Babel-node命令转换并执行
例如： babel-node example.js

4. Babel-register
该模块改写了require命令，加上了一个钩子。此后每当使用require加载带有.js / .jsx / .es / .es6的文件时，就会先用babel进行转码
首先 npm install –save-dev babel-register
然后 require(“babel-register”)
require(“./index.js”)
此时不需要再对index.js进行转码

5. Babel-core
需要调用BABEL的API进行转码，就需要使用babel-core模块（暂未用上）

6. babel-poly
babel默认只转换新的JS语法，不转换新的API，比如Iterator ， Generator ， Set ， Maps ， Proxy ， Reflect ， Symbol ， Promise 等全局对象。以及定义在全局对象的方法（比如Object.assign）

7. 浏览器环境以script标签方式引入
的方式引入，会造成而性能下降，生产环境需要加载已经转码的脚本！