Babel 是什么？
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 通过语法转换器来支持新版本的 JavaScript 语法。
- 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过
@babel/polyfill) - 源码转换 (codemods)
使用babel-standalone实现ES6在线转换
- babel-standalone支持非 node.js 环境下直接使用 Babel。
- 虽然实时转码很方便，但由于实时转码需要时间，性能上不及预先转换的方案
- 将需要转码的js写在
<script type="text/babel">标签中，则转码后的内容会自动出现在<head>标签内
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
...
</script>
使用@babel包进行本地转码
- 在本地而非全局进行安装，方便单独指定babel版本和转码规则等
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
- 配置转码规则
在项目根目录下创建一个babel.config.js文件，并进行如下配置
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
ie:"11"
},
useBuiltIns: "usage",//Babel 将检查代码，并引入目标环境中必须的 polyfill
},
],
];
module.exports = { presets };
- 运行命令进行转码
./node_modules/.bin/babel <js文件或目录> --out-dir <输出目录>
或通过批处理文件执行
./node_modules/.bin/babel %1 --out-dir %2
网友评论