为啥 React 需要 Babel 和 Webpack 才能工作？

Posted 2023-02-22

【中文标题】为啥 React 需要 Babel 和 Webpack 才能工作？

【英文标题】：Why does React require Babel and Webpack to work?为什么 React 需要 Babel 和 Webpack 才能工作？

【发布时间】：2017-08-27 18:13:42

【问题描述】：

我正在查看 vue.js 的 wiki 页面并看到了这个：

与 React 开发相比，Vue 可以集成到一个 现有的 Web 应用程序更容易。通常，Web 应用程序 只需包含 Vue.js 即可立即开始使用 Vue javascript 库。与 Webpack 或 Browserify 的使用并不严格 一定。这与 React 开发形成鲜明对比 使用 Webpack 和 Babel 是不可避免的，因此使 转换现有的 Web 应用程序要困难得多。

有人能解释一下为什么 React 需要 webpack 和 babel 吗？我以为你可以直接放入 React 的 CDN 的链接，它会起作用吗？

【问题讨论】：

React 使用的 JSX 与普通 JS 略有不同，因此需要通过 Babel 运行。

但对于非 JSX 开发（仅限 JavaScript）只需指向任何 React CDN

【参考方案1】：

不，Babel 和 Webpack 对于 React 堆栈不是必需的。您仍然可以找到其他替代方案来构建您喜欢的堆栈，例如 Browserify 和 Gulp。

但是，如果你想让事情变得更简单，我建议你学习 Babel 和 Webpack 并将其与 React 一起使用，因为：

您可以使用模块。 您可以将 JSX 与 ES6 一起使用。 支持多种浏览器 您可以使用更高级的功能（异步/等待）等

使用 webpack

您可以为 sass、less、postcss 等使用不同的加载器 您可以使用不同的插件来优化您的构建，例如 Uglify、HotModuleReplacement、Chunks 等

使用 webpack 还有很多好处，你可以找到here

【讨论】：

我认为他真正的意思是：“React 堆栈需要 babel、webpack、browserify、gulp 等吗？”。请注意，vue.js 声称它不需要它们，因为您可以从 <script src="vue.js"></script> 开始

【参考方案2】：

有人能解释一下为什么 React 需要 webpack 和 babel 吗？我以为你可以直接放入 React 的 CDN 的链接，它会起作用吗？

React 并不“需要” babel 或 webpack，但该库建立在使用 ES6 javascript 语法和 JSX（本质上是 JS 中的 html）的概念之上。

但是，React 可以在没有 ES6 和 JSX 的情况下使用，这将消除对 Babel 的初始需求，但您将失去 ES6 和 JSX 的潜在好处。

Webpack 与 React 是分开的，但由于提到 MattYao 的原因，它通常用于 React 项目。

与 Vue 相比，JSX 给我带来了在一个文件/组件中包含 html、css 和 JS 的好处，这也是 Vue 中的单文件组件也试图实现的。这些也需要使用 webpack 之类的构建步骤。

【讨论】：

CSS 和 JS 代码可以使用样式和脚本标签包含在 HTML 中。

@Alex78191 - 对不起，那不是一回事。在 JS 文件中包含自己的 HTML 和 CSS 的 React 组件允许将应用程序的一部分抽象出来并与其他组件隔离。简单地将 CSS 和 JS 代码放入 HTML 文件并不会这样做，因为现在 JS 代码不能与另一个 HTML 文件中的代码交互，也不能在“组件”中。编译后，是的，它通常只有一个 html、css 和 js 文件，但大多数 react/angular/vue 应用程序不会这样编码，只能编译。