Babel——ES6转换

最新推荐文章于 2024-09-23 09:42:46 发布

hawkey7

最新推荐文章于 2024-09-23 09:42:46 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/weixin_40821790/article/details/78683873

版权

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

摘要由CSDN通过智能技术生成

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