react-scripts的工作原理

我们来看看执行npm start/yarn start时，代码如何执行的。

首先我们使用react脚手架工具create-react-app初始化完一个react项目，打开package.json :

在命令行中执行npm start/yarn start时，相当于执行react-scripts start，我们去node_modules/中去找

react-scripts.js文件会根据参数去判断执行哪种构建脚本，比如当前参数是start，那么就会去执行scripts目前下的start.js

在start.js中引入了webpack-dev-server，该模块是一个webpack的插件，专门用来启动本地调试服务器的。

下面代码就是启动服务

下面我们在终端输入yarn start试试：

同样，我们看看build.js里面：

webpack.config.js里

所以我们使用create-react-app搭建项目时无需我们来配置构建脚本。

参考：react-scripts实现原理

react-scripts的工作原理相关推荐

详解React的Transition工作原理原理
Transition 使用姿势 Transition 是 react18 引入的新概念,用来区分紧急和非紧急的更新. 紧急的更新,指的是一些直接的用户交互,如输入.点击等: 非紧急的更新,指的是 UI ...
JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理
摘要: 深入JS系列19. 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门 ...
[react] 你知道Virtual DOM的工作原理吗？
[react] 你知道Virtual DOM的工作原理吗? Virtual DOM是什么:虚拟DOM是真实DOM的javascript对象的映射 Virtual DOM的工作原理:数据驱动视图更新这个 ...
[react] 简要描述下你知道的react工作原理是什么？
[react] 简要描述下你知道的react工作原理是什么? 我理解的核心部分: 通过虚拟DOM表达真实DOM 通过数据驱动更新虚拟DOM进而更新真实DOM(MVVM) 有一套完整并且合理的 DOM ...
react构建小程序框架及remax的工作原理
1.为什么要用 React 来构建小程序? react生态体系完善. 自Facebook在2013年5月开源React,经历了7年多的发展,react的社区生态体系非常庞大,若是使用react来构建小 ...
fragment的工作原理_Preact（React）核心原理详解
原创: 宝丁玄说前端本文作者:字节跳动 - 宝丁 ---------------------------- 一.Preact 是什么二.Preact 和 React 的区别有哪些? 三.Prea ...
通俗易懂的React事件系统工作原理
前言 React 为我们提供了一套虚拟的事件系统,这套虚拟事件系统是如何工作的,笔者对源码做了一次梳理,整理了下面的文档供大家参考. 在 React事件介绍中介绍了合成事件对象以及为什么提供合成事件 ...
有人说 GPT3 是“暴力美学”的结晶，它的工作原理你知道吗？| 动图详解
来源:CSDN 如今,在科技领域掀起了一股GPT3的热潮.大规模语言模型(比如GPT3)的潜力惊艳了我们.虽然这些模型还没有成熟到大多数企业将之直接面对消费者,但却展示出一些智慧的火花,并让人坚信其将 ...
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
js 数组实现完全树_JavaScript的工作原理：解析、抽象语法树（AST）+ 提升编译速度5个技巧
摘要: JS的"编译原理". 原文:JavaScript的工作原理:解析.抽象语法树(AST)+ 提升编译速度5个技巧作者:前端小智 Fundebug经授权转载,版权归原作者所有 ...

react-scripts的工作原理

react-scripts的工作原理相关推荐

最新文章

热门文章