Hello, World!

;\n};\n```\n\nBabel 会将这段 JSX 编译为如下的 JavaScript 代码：\n\n```javascript\nconst MyComponent = () => {\n return React.createElement(\"div\", null, \"Hello, World!\");\n};\n```\n\n由于编译后的代码调用了`React.createElement`，因此你需要在文件顶部导入`React`对象才能使用它。即使你在组件中并没有直接使用`React`对象，编译后的代码依赖于`React`的运行时。\n\n### Babel 7.0+ / React 17+ ，可以不再需要 import React\n\n在 Babel 7.0 版本之后，`@babel/plugin-transform-react-jsx` 插件还支持一个自动模式，它可以自动引入 JSX 转换所需的`React`包，无需手动在每个文件中添加 `import React from 'react'`。\n\n注意，随着 React 17 的新 JSX 变换，它们引入了一个新的 JSX 转换方式，这在新的 Babel 插件 `@babel/plugin-transform-react-jsx` 和 `@babel/preset-react` 中得到了支持。这意味着在写 JSX 时，你不再需要导入 React。这个插件现在接收一个 `{ runtime: 'automatic' }` 选项来启用这一特性。\n\n举个例子，在使用新的 JSX 转换之后，编译器将会自动引入 JSX 的运行时库，而不是 React，例如对于一个使用了新转换的`MyComponent`的组件:\n\n```jsx\n// React 17+ 及支持新JSX转换的环境，可以不需要显式写这行\n// import React from 'react';\n\nconst MyComponent = () => {\n return

Hello, World!

;\n};\n```\n\n在新的转换下，你会看到类似`import { jsx as _jsx } from 'react/jsx-runtime'`的东西或者类似的别名，被自动插入到转译后的文件中，而不再是直接的`React.createElement`调用。这就是为什么在新版本的 React 中，你可能不再需要手动导入 React 了。\n\n### 补充一个细节知识点： plugin-transform-react-jsx`和`@babel/preset-react` 是啥关系\n\n**它们是包含关系**： `@babel/preset-react` 包括了 `@babel/plugin-transform-react-jsx`\n\n`@babel/plugin-transform-react-jsx` 和 `@babel/preset-react` 都是 Babel 插件，它们在处理 React 项目中的 JSX 代码方面有关联，但它们的用途和包含的内容有所不同。\n\n1. **@babel/plugin-transform-react-jsx**:\n 这是一个特定的 Babel 插件，它的功能就是将 JSX 语法转换为`React.createElement` 调用。随着 React 17 的更新，它还允许使用新的 JSX 转换，无需导入 React 就可以使用 JSX。这意味着，在文件中不再需要 `import React from 'react'` 语句了，就可以使用 JSX。\n\n 这个插件通常用于开发者想要精细控制某个具体转换功能时。如果你只需要转换 JSX 语法，但不需要处理其他与 React 相关的转换或优化，你可能会单独使用这个插件。\n\n2. **@babel/preset-react**:\n 这是一个 Babel 预设，它是一组 Babel 插件的集合，旨在为 React 项目提供所需的全部 Babel 插件。`@babel/preset-react` 包括了 `@babel/plugin-transform-react-jsx`，但它还包含了其他一些插件，如处理 React 的显示名称的 `@babel/plugin-transform-react-display-name`，以及为开发模式和生产模式添加/删除某些代码的插件。\n\n 预设的好处是简化了配置过程。开发者可以在 Babel 的配置中一次性添加 `@babel/preset-react`，而不是单独添加每一个与 React 相关的 Babel 插件。此外，预设将维护这些插件的正确版本和顺序，这有助于避免潜在的配置错误。\n\n在实践中，大多数开发 React 应用的开发者会使用 `@babel/preset-react` 因为它提供了一个即插即用的 Babel 环境，无需担心各个插件的具体细节。但是也有些情况下，为了更细致的优化和控制，开发者可能会选择手动添加特定的插件，包括 `@babel/plugin-transform-react-jsx`。\n",{"_58":321,"_179":151,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151},"https://api.github.com/repos/pro-collection/interview-question/issues/701/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/701/timeline",{"_58":324,"_60":61,"_62":325,"_64":326,"_66":327,"_68":328,"_70":329,"_72":330,"_74":331,"_76":332,"_78":333,"_111":334,"_130":131,"_132":24,"_133":-5,"_134":337,"_136":338,"_158":151,"_152":340,"_154":340,"_157":-5,"_160":161,"_106":-5,"_162":-5,"_163":341,"_168":342,"_174":343,"_176":344,"_188":346,"_190":-5,"_191":-5,"_192":193},"https://api.github.com/repos/pro-collection/interview-question/issues/700","https://api.github.com/repos/pro-collection/interview-question/issues/700/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/700/comments","https://api.github.com/repos/pro-collection/interview-question/issues/700/events","https://github.com/pro-collection/interview-question/issues/700",2241866681,"I_kwDOJGDC6c6FoCu5",700,"babel 核心库有哪些？【热度: 35】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[335,336],{"_70":305,"_72":306,"_58":307,"_117":308,"_119":309,"_121":24,"_122":310},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":-5},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":339,"_148":149,"_150":151,"_130":131,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-14T02:22:11Z",{"_165":151,"_166":151,"_167":151},{"_170":151,"_171":151,"_172":151,"_173":151},"**关键词**：babel 核心库\n\nBabel 是一个 JavaScript 编译器，主要用于将 ES6 及以上版本的代码转换为向后兼容的 JavaScript 语法，以便在当前和旧版浏览器或环境中执行。核心的 Babel 库主要包括：\n\n1. **@babel/core**:\n 这是 Babel 编译器的核心包，提供了 Babel 的主要转换引擎。它包含了解析、转换和生成代码的主要功能。几乎所有的 Babel 操作都需要这个模块作为基础。\n\n2. **@babel/cli**:\n 这是 Babel 的命令行接口，通过它可以在终端或命令提示符中运行 Babel。它允许你执行转编译操作，如将 ES6 代码转换为 ES5。\n\n3. **@babel/preset-env**:\n 这是一个智能预设，允许你使用最新的 JavaScript，而不必管理语法转换。`@babel/preset-env`会根据你的目标环境（比如特定版本的浏览器或 Node.js），自动决定使用哪些 Babel 插件和 polyfills。\n\n4. **@babel/polyfill** (现在已经被废弃，推荐使用 `core-js` 和 `regenerator-runtime`):\n 早期 Babel 版本中用于模拟完整的 ES2015+环境的包。它的目的是在全局范围内添加填充以模拟较新的环境。从 Babel 7.4.0 开始，建议直接包括 `core-js` 和 `regenerator-runtime`，因为这提供了更好的模块化和按需加载功能。\n\n5. **babel-loader**:\n 这是 Babel 的一个 webpack 插件，可以将 Babel 集成到 webpack 构建过程中，使得你可以使用 webpack 来处理和打包使用了新版 JavaScript 语法的文件。\n\n6. **@babel/plugin-transform-runtime**:\n 这个插件用于复用 Babel 注入的辅助代码，以节省代码大小，并能够在不污染全局环境的情况下使用新语言特性的 polyfills。\n\n除了这些核心库外，还有许多可用的 Babel 插件，以支持各种 JavaScript 语法和特性（比如装饰器、类属性等）。这些插件可以按需引入，配置在 Babel 的配置文件（通常是`.babelrc`或`babel.config.js`）中。这些插件的命名通常遵循 `@babel/plugin-` 的格式。\n",{"_58":345,"_179":151,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151},"https://api.github.com/repos/pro-collection/interview-question/issues/700/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/700/timeline","pagination",{"_349":350,"_165":193},"value",-1,"actionData","errors"]