ES6 是 ECMAScript 的第六次标准化，它拥有许多强大的语言特性，例如箭头函数、类、解构赋值、模板字面量等。不幸的是，一些 JavaScript 引擎（例如 IE11）不支持 ES6。这意味着当我们编写 ES6 代码时，需要将其转换为 ES5。本文将介绍在 ES6 中如何使用 ES6 转 ES5。
Babel
Babel 是一个广泛使用的 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码。Babel 可以转换许多 ES6 语言特性，例如箭头函数、类、模块等。它还支持许多插件，可以扩展其功能。
安装
在进行转换之前，需要安装 Babel。可以使用 npm 进行安装：
npm install @babel/core @babel/cli @babel/preset-env --save-dev
- @babel/core 是 Babel 的核心库。
- @babel/cli 是 Babel 的命令行界面。
- @babel/preset-env 是 Babel 的预设，它包含了可以转换 ES6 语言特性的插件。
配置 Babel
配置 Babel 很简单，只需要在项目根目录创建一个 .babelrc 文件，然后指定需要使用的预设：
{ "presets": ["@babel/preset-env"] }
这个配置文件告诉 Babel 使用 @babel/preset-env 预设进行转换。
转换文件
完成配置后，可以使用 Babel 命令行界面转换文件，例如：
npx babel src --out-dir dist
这个命令告诉 Babel 将 src 目录下的所有文件转换为 ES5，并将其输出到 dist 目录。
Webpack
Webpack 是一个广泛使用的 JavaScript 模块打包工具，它可以将多个 JavaScript 文件打包成一个文件，同时还可以转换 ES6 代码为 ES5 代码。
安装
在进行转换之前，需要安装 Webpack。可以使用 npm 进行安装：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
- webpack 和 webpack-cli 是 Webpack 的核心库。
- babel-loader 是一个 Webpack 加载器，用于将 ES6 代码转换为 ES5 代码。
- @babel/core 是 Babel 的核心库。
- @babel/preset-env 是 Babel 的预设，它包含了可以转换 ES6 语言特性的插件。
配置 Webpack
配置 Webpack 也很简单。在项目根目录创建一个 webpack.config.js 文件，然后指定入口文件、输出文件和加载器：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ----- ------------- ------ ----------------- ------- - --------- ------------ ----- ----------------------- -------- -- ------- - ------ - - ----- -------- ---- --------------- -------- --------------- -- -- -- --展开代码
这个配置文件告诉 Webpack：
- 入口文件是
./src/index.js。 - 输出文件是
./dist/bundle.js。 - 使用
babel-loader加载器转换所有.js文件，排除node_modules目录。
打包文件
完成配置后，可以使用 Webpack 将多个 JavaScript 文件打包成一个文件，并将 ES6 代码转换为 ES5 代码。运行：
npx webpack这个命令告诉 Webpack 执行打包操作，并将打包后的文件输出到 ./dist/bundle.js。
示例代码
下面是一个示例代码，它使用了许多 ES6 语言特性：
-- -------------------- ---- ------- ----- ------ - ----------------- - --------- - ----- - ---------- - ------------------- ---------------- - - ----- --- - --- -------------- ---------------展开代码
使用 Babel 或 Webpack 可以将这段代码转换为 ES5 代码，例如：
-- -------------------- ---- ------- -------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - - --- ------ - -------- ------------ - --------------------- -------- --------- - ----- -- ------------------------- - -------- -- - ------------------- - - --------- - ----- -- --- --- - --- -------------- ---------------展开代码
结论
通过使用 Babel 或 Webpack，可以将 ES6 代码转换为 ES5 代码，从而使其能在不支持 ES6 的 JavaScript 引擎上运行。在实践中，常常使用 Webpack 将多个 JavaScript 文件打包成一个文件，并进行 ES6 转 ES5 操作。这提高了应用程序的性能和可维护性，并使其更加可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ef694e884a3e30f2b3d3e
