在前端开发中，Babel 是一款非常常用的工具，它可以将 ES6 及以上版本的 JavaScript 代码转化为 ES5 及以下版本的代码，以便在各种浏览器中运行。在 Babel 中，preset 是一组插件的集合，它可以帮助我们将代码转化为特定的语法。而在 React 开发中，我们通常会用到两个非常重要的 preset：preset-react 和 preset-env。本文将详细介绍这两个 preset 的差别以及应用场景，并提供相应的示例代码。
preset-react
在 React 开发中，preset-react 是必不可少的 preset。它主要包含了以下插件：
- @babel/plugin-transform-react-jsx：将 JSX 语法转化为普通的 JavaScript 语法；
- @babel/plugin-transform-react-display-name：为组件添加名称，便于调试。
我们可以使用以下命令安装 preset-react：
npm install --save-dev @babel/preset-react
然后在 .babelrc 文件中配置：
{
"presets": ["@babel/preset-react"]
}使用 preset-react 可以帮助我们在开发 React 应用时，不需要手动将 JSX 语法转化为普通的 JavaScript 语法。例如，我们可以使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
------ -
-----
---------- -----------
------
--
--
------ ------- ----这段代码中，我们使用了 JSX 语法，但是使用了 preset-react 后，Babel 会自动将 JSX 语法转化为普通的 JavaScript 语法，如下所示：
import React from 'react';
const App = () => {
return React.createElement('div', null, React.createElement('h1', null, 'Hello, World!'));
};
export default App;preset-env
preset-env 是一个非常强大的 preset，它可以根据目标浏览器或者运行环境自动地将代码转化为相应的语法。preset-env 包含了大量的插件，例如：
- @babel/plugin-transform-arrow-functions：将箭头函数转化为普通函数；
- @babel/plugin-transform-classes：将 ES6 的类转化为 ES5 的构造函数；
- @babel/plugin-transform-template-literals：将模板字符串转化为普通字符串；
- 等等。
我们可以使用以下命令安装 preset-env：
npm install --save-dev @babel/preset-env
然后在 .babelrc 文件中配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-在这个配置中，我们指定了目标浏览器为最近两个版本的浏览器以及 Safari 7 及以上版本。preset-env 会根据这个配置自动地将代码转化为相应的语法。
应用场景
我们可以根据实际情况选择使用 preset-react 或者 preset-env。一般来说，如果我们在开发 React 应用，那么需要使用 preset-react；如果我们需要兼容多种浏览器，那么需要使用 preset-env。
下面是一个使用 preset-env 的示例代码：
const obj = {
foo: 1,
bar: 2,
};
const entries = Object.entries(obj);
console.log(entries);这段代码中，我们使用了 ES6 的 Object.entries 方法，它可以将对象转化为数组。但是这个方法在一些旧版本的浏览器中并不支持，所以我们需要使用 preset-env 将它转化为普通的 JavaScript 代码，如下所示：
-- -------------------- ---- -------
---- --------
--- --------------- - -------- ----- -
--- -------- - ----------------- - - ---------------- -------- - --- ---------
----- ----- -
----------- - ------------- ------------------
-
------ ---------
--
--- --- - -
---- --
---- -
--
--- ------- - ---------------------
---------------------这样，我们就可以在旧版本的浏览器中运行这段代码了。
总结
在本文中，我们介绍了 Babel 的 preset-react 和 preset-env，它们的差别以及应用场景，并提供了相应的示例代码。在实际开发中，我们可以根据需求选择相应的 preset，以便更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6566aba8d2f5e1655dfa890e