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

2024-01-31

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

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

有人能解释一下为什么 React 需要 webpack 和 babel 吗?我以为你只要把 React 的 CDN 链接放进去就可以了?


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

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

  • 您可以使用模块。
  • 您可以将 JSX 与 ES6 一起使用。
  • 它支持很多浏览器
  • 您可以使用更高级的功能(异步/等待)等

使用网络包

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

使用 webpack 还有很多优点,您可以发现here http://blog.andrewray.me/webpack-when-to-use-and-why/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 React 需要 Babel 和 Webpack 才能工作? 的相关文章

  • Redux 减速器的副作用

    Redux 减速器应该没有副作用 但是 如果某个操作应该触发浏览器中文件的下载 其中内容基于商店的状态 该怎么办 这当然应该算作副作用吗 像下面这样的方法可以吗 还是我应该寻找替代方法 case SAVE GRID const json s
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div
  • 如何在 Gatsby 页面上包含本地 JavaScript?

    我是一个完全的 React 新手 我想这里有些基本的东西我不太明白 默认的 Gatsby 页面如下所示 有没有办法像这样使用本地 js 文件 我想要实现的是让反应忽略script js但仍然让客户端使用它 默认的 Gatsby 页面看起来像
  • 如何发送和接收大型 JSON 数据

    我对全栈开发比较陌生 目前正在尝试找出一种有效的方法send and fetch我的前端 React 和后端 Express 之间存在大量数据 同时最大限度地减少内存使用 具体来说 我正在构建一个地图应用程序 它需要我处理大型 JSON 文
  • 使用 rollup.js 创建 React 库时出现错误 null(读取“useState”)

    我正在使用 rollup js 创建一个反应库 但是当我运行时npm run build我收到一个错误 仿佛useState尝试从中检索钩子null Uncaught TypeError Cannot read properties of
  • Redux - 从函数调用操作

    我正在尝试从函数调用 redux 操作 我调用该函数的组件已连接到商店 但是 如果我通过以下操作 它就不起作用 function myFunc action action 有没有办法通过参数传递动作 谢谢 using bindActionC
  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • 我点击的号码没有出现在反应项目的屏幕上

    当我尝试在屏幕中呈现点击的数字时 该数字没有出现 但它确实可以在控制台中显示 我不知道如何修复它应该在屏幕上 号码 旁边应用的号码 import render from testing library react import React
  • 将两个 JSON 数据合并为具有特定键值的一个

    我有两个 CSV 文件 球数据 json id 1 color red id 2 color blue 法庭 json court id 2001 ball in use 1 court id 2005 ball in use 2 如何根据
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 在react-big-calendar中单击事件时添加弹出窗口?

    当单击事件时 我无法将弹出窗口添加到事件中 弹出窗口似乎只显示在事件槽中 而不是显示在事件槽的顶部 此外 由于我为事件创建了一个自定义组件并尝试在自定义组件中实现弹出窗口 因此只有当我单击事件名称时才会显示弹出窗口 这是代码 class C
  • react-route,react-hot-loader.webpack(您无法更改 ;它将被忽略)

    这是我的第一个项目react react router react hot loader webpack dev server and webpack 当我更改react组件中的代码时 热加载器生效 但同时控制台告诉我一个警告 您无法更改
  • 有没有办法在 React.render() 函数中渲染多个 React 组件?

    例如我可以这样做 import React from react import PanelA from panelA jsx import PanelB from panelB jsx React render
  • 使用代理时,React 应用程序正在不同位置查找静态文件

    我用过npx create react app my app创建一个反应应用程序 我用过的npm run build构建应用程序并使用它进行部署serve s build 我正在使用代理服务器来公开我的应用程序 我的 httpd 配置如下所
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • TypeScript 编译速度极慢 > 12 秒

    只是把它放在那里看看其他人是否也遇到这个问题 我已经使用 webpack 作为我的构建工具 使用 typescript 构建了一个 Angular 2 应用程序 一切都运行良好 但是我注意到 typescript 编译超级超级慢 我现在只有
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type
  • Redux-saga 从操作中获取数据返回patternOrChannel 未定义

    我需要将动态数据从屏幕发送到操作 减速器 并使用该数据从 API 获取数据 但是当我在我的rootSaga我会收到这样的错误 在检查 take patternOrChannel 时未捕获 patternOrChannel 未定义未捕获在 r

随机推荐

  • 当 sed 在 mingw 中就地编辑时权限被拒绝

    我正在使用 mingw sed i s a b test txt sed preserving permissions for sed003480 Permission denied 我可以触摸 rm当前目录中的文件 这是由 Windows
  • ios 7 UiView 框架问题

    我在 iOS6 和 iOS7 中运行相同的应用程序 其中有导航栏 它在 iOS6 上运行良好 但在 iOS7 中 所有视图都有点向上 就像根本没有考虑导航栏一样 我尝试更改模拟指标选项中的顶栏属性 但它不起作用 在 iOS6 中 它从导航栏
  • 在 POST/batches 请求中使用现有的 SparkSession

    我正在尝试使用Livy远程提交多个Spark jobs 假设我想执行以下操作spark submit远程任务 包含所有选项 spark submit class com company drivers JumboBatchPipelineD
  • Serilog - 无法根据属性记录到多个文件

    您好 我正在尝试使用以下命令在一个文件中记录一些消息 在另一个文件中记录其他消息Serilog 我尝试过以下配置 Log Logger new LoggerConfiguration WriteTo Map type audit name
  • ndb async 是否保证在应用程序请求完成后执行?

    我正在使用 ndb 编写一个分析模型 该模型根据应用程序请求记录一些数据 每个请求通过ndb put async调用一个ndb请求来记录数据 而客户端不关心结果 本质上 我不希望应用程序请求等待保存统计数据以进行分析 然而 我对官方文档的解
  • Android设置壁纸出错了

    所以我很久以前就在开发壁纸更换器并发布了它 一段时间后 我开始收到壁纸尺寸调整不正确的评论 我还尝试了不同尺寸的鸸鹋 它们是正确的 我正确地缩放位图等 但不知何故 android倾向于将壁纸重新缩放得更大 有办法避免吗 我的代码 Displ
  • 与 VB.NET 中的 Array() 等效吗?

    在 VB6 中你可以这样做 Dim a As Variant a Array 1 2 3 你能在 VB NET 中使用特定类型做类似的事情吗 Dim a As Integer a Array 1 2 3 Dim a As Integer N
  • 命名空间“std”中没有名为“unary_function”的模板;您的意思是“__unary_function”吗?

    刚刚将我的 Xcode 升级到 15 0 突然它开始在 RCT Folly 中出现以下错误 No template named unary function in namespace std did you mean unary funct
  • 在运行时转储 gcov 数据

    我正在使用 gcov 收集我正在从事的 C 项目的代码覆盖率数据 据我所知 一旦程序完成后退出 gcov 就会转储代码覆盖率数据 如何收集长时间运行的进程的 gcov 数据 比如说 我的程序是一个操作系统的内核 该操作系统在永不关闭的服务器
  • iOS:Xcode 中的 ImageMagick 编译器警告

    我在 iOS 项目中使用 ImageMagick 但是该库已经过时 因为以前的开发人员使用了源代码 我使用的是 Xcode 6 3 2 我想使用 Cocoapods 将 ImageMagick 集成到项目中 而不是复制源文件 然而 当我将
  • SDL_ttf找不到“SDL.h”,但main.cpp可以

    我正在编写一个 make 文件来编译一个非常简单的 SDL2 程序 到目前为止 它编译 SDL2 得很好 现在我正在编译扩展框架 SDL2 image 和 SDL ttf 看起来MAKE正确地找到了SDL ttf h 但是SDL ttf h
  • 使用 GSON 将 JSON 转换为 Java 对象时如何覆盖 Java 映射?

    我有一个 JSON 字符串 如下所示 status status date 01 10 2019 alerts labels field1 value1 field2 value2 field3 value3 field100 value1
  • Sphinx Note Block 在代码块下的列表中?

    我有一个问题 如果我想将注释块放在代码块下的列表中 它就会包含在代码块中 如果我取消缩进 列表编号会在注释后重新开始 所以基本上 我需要的是 Fixed list example First do spam Then do eggs som
  • 如何使用 BERT 找到与向量最接近的单词

    我正在尝试使用 BERT 获取给定单词嵌入的文本表示 或最接近的单词 基本上我试图获得与 gensim 类似的功能 gt gt gt your word vector array 0 00449447 0 00310097 0 024217
  • 谷歌的无图像按钮

    最近有几篇关于谷歌新的无图像按钮的文章 http stopdesign com archive 2009 02 04 recreating the button html http stopdesign com archive 2009 0
  • 将文本添加到绘图中

    x lt seq 3 3 0 01 y1 lt dnorm x 0 1 y2 lt 0 5 dnorm x 0 1 plot x y1 type l bty L xlab X ylab dnorm X points x y2 type l
  • 数组中所有元素的总和

    我是编程初学者 我想计算数组中所有元素的总和 我做了这个 但我看不出我的错误在哪里 function ArrayAdder array this sum 0 this array array ArrayAdder prototype com
  • python 按不同标准对元组进行排序

    我有一个清单a 1 a 1 b 2 c 我想得到这个列表 2 c 1 a 1 b 如果我这样做 sorted a reverse True 我只能得到 2 c 1 b 1 a 我怎样才能得到我想要的列表 如果您想保留原始列表中的排序顺序 但
  • 如何通过 SoundCloud API 添加评论

    我想通过 SoundCloud API 发表评论 但查看文档 http developers soundcloud com docs api reference tracks这似乎是不可能的 唯一可用的方法 tracks id commen
  • 为什么 React 需要 Babel 和 Webpack 才能工作?

    我正在查看 vue js 的 wiki 页面 看到了这个 与 React 开发相比 Vue 可以集成到 现有的 Web 应用程序更加容易 通常 Web 应用程序 只需包含 Vue js 即可立即开始使用 Vue JavaScript 库 与