在前端开发中，我们通常需要使用一些自定义的代码转换器（例如将 ES6+ 代码转换成 ES5 代码），@babel/core 就是一个非常优秀且广泛使用的转换器，本文将为大家详细介绍如何使用 npm 包 @babel/core。
@babel/core 是什么？
@babel/core 是 Babel 的核心包，它是一个 JavaScript 编译器，能够将 ES6+ 的代码转换为向后兼容的 JavaScript 代码。除此之外，它还有许多插件可供使用，可扩展性很强，可以轻松完成各种自定义编译规则。
如何安装 @babel/core？
在项目中使用 @babel/core，需要先安装它：
npm install --save-dev @babel/core
- --save-dev 表示保存为开发依赖，只会安装在开发环境中；
安装完成后，可以在项目的根目录中找到 node_modules/.bin 目录，其中包含了一个 babel 命令，可执行查看当前安装的 Babel 版本：
$./node_modules/.bin/babel --version 7.15.0 (babel-core 7.15.0)
如何配置 @babel/core？
在使用 @babel/core 转换 ES6+ 代码之前，需要先配置 Babel。Babel 的配置文件是一个名为 .babelrc 的 JSON 文件，其中包含了各种插件和预设的配置信息。以下是一个简单的 .babelrc 配置文件示例：
{
"presets": [
"@babel/preset-env"
],
"plugins": []
}- presets 表示预设，用于一次性加载一系列 Babel 插件；
- plugins 表示插件，用于针对单个功能进行加载；
举例来说，如果需要将 ES6+ 代码转换成 ES5 代码，只需安装 @babel/preset-env 这个预设，添加到 .babelrc 配置文件的 preset 中，即可完成转换。以下是一个 .babelrc 示例：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- --- ---- ----- - ----------
-
-
-
--
---------- --
-- targets 用于指定转换的浏览器环境；
如何使用 @babel/core？
@babel/core 的使用非常灵活，可以通过 CLI、Webpack、Grunt、Gulp 等方式使用，这里介绍其中一种基础的使用方法。
新建一个 index.js 文件，输入以下内容：
const a = () => {
console.log('Hello, World!');
};
a();将以上代码转换成 ES5 代码，需要使用 @babel/core，以 npm scripts 为例在 package.json 中添加以下代码：
"scripts": {
"compile": "babel ./index.js --out-dir ./dist"
}在终端运行以下命令，即可将 ./index.js 转换成 ES5 代码并输出到 ./dist 目录下：
npm run compile
总结
以上是本文的全部内容，讲述了如何安装和配置 @babel/core，以及如何使用 @babel/core 进行代码转换。当然，本文还只是浅尝辄止，Babel 的功能十分丰富，可以根据自身的需要进行定制化配置。希望本文对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/83493