为什么 React 需要 Babel 和 Webpack 才能工作?

IT技术 reactjs webpack babeljs
2021-05-11 10:09:21

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

与 React 开发相比,Vue 可以更轻松地集成到现有的 Web 应用程序中。通常,Web 应用程序只需包含 Vue.js JavaScript 库即可立即开始使用 Vue。与 Webpack 或 Browserify 一起使用,并不是绝对必要的。这与 React 开发形成鲜明对比,其中使用 Webpack 和 Babel 是不可避免的,因此使转换现有的 Web 应用程序变得更加困难。

有人可以解释为什么 React 需要 webpack 和 babel 吗?我以为你可以直接插入 React CDN 的链接,它会起作用吗?

2个回答

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

然而,如果你想让事情变得更简单,我建议你学习并将 Babel 和 Webpack 与 React 一起使用,因为:

  • 您可以使用module。
  • 您可以在 ES6 中使用 JSX。
  • 它支持很多浏览器
  • 您可以使用更高级的功能(async/await)等

使用 webpack

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

使用 webpack 还有很多好处,你可以在这里找到

有人可以解释为什么 React 需要 webpack 和 babel 吗?我以为你可以直接插入 React CDN 的链接,它会起作用吗?

React 不需要 babel 或 webpack,但该库建立在使用 ES6 javascript 语法和 JSX(本质上是 JS 中的 HTML)的概念之上。

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

Webpack 与 React 是分开的,但由于MattYao提到的原因在 React 项目中常用

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