在前端开发中，我们经常需要将 ES6+ 的代码转换为能够在所有浏览器中运行的 ES5 代码。这就是 6to5 这个 NPM 包所解决的问题。
什么是 6to5？
6to5（现在叫做 Babel）是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为 ES5 代码。它还支持许多其他功能，例如：TypeScript、JSX、Flow 等等。
安装 6to5
首先，在本地安装 6to5：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
@babel/core：Babel 核心模块。@babel/cli：Babel 命令行工具。@babel/preset-env：Babel 预设，用于将现代 JavaScript 代码转换为 ES5。
然后，在项目根目录下创建 .babelrc 文件，并添加以下内容：
{
"presets": ["@babel/env"]
}这里只使用了一个预设，即 @babel/env，它会自动根据你的配置决定需要转换哪些语法特性。
使用 6to5
接下来，我们来看一个例子，将 ES6+ 的箭头函数和模板字符串转换为 ES5：
// index.js
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet('World');运行以下命令：
npx babel index.js --out-file index-compiled.js
执行完毕后，你会在项目根目录下看到一个新文件 index-compiled.js，它就是被转换后的 ES5 代码：
// index-compiled.js
"use strict";
var greet = function greet(name) {
console.log("Hello, ".concat(name, "!"));
};
greet('World');使用 6to5 转换整个项目
如果你想将整个项目都转换成 ES5 代码，可以使用 babel-loader 和 webpack。
首先，安装依赖：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
然后，在项目根目录下创建 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------
-
-
-
-
-
--这里我们配置了一个简单的 Webpack 配置文件，它告诉 Webpack 从 ./src/index.js 入口文件开始打包，然后使用 Babel 转换所有 JS 文件，最后输出到 bundle.js 文件中。
然后，运行以下命令：
npx webpack
执行完毕后，你会在项目根目录下看到一个新文件 bundle.js，它就是被转换后的 ES5 代码。
结论
6to5（Babel）是前端开发中非常重要的一个工具，它可以帮助开发者将现代 JavaScript 代码转换为能够在所有浏览器中运行的 ES5 代码。在实际开发中，我们需要根据项目不同的需求灵活使用它，并结合其他工具（例如 Webpack）来进行整个项目的转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48322