create-react-app中,出现了一个新的概念,叫做:react-scripts。那么在本篇文章中,苏南大叔初步介绍一下react-scripts这个类库文件的用途。

了解react-scripts这个代码,最好的办法,就是翻翻对应的源代码了。在项目根目录下面的node_modules文件夹中,苏南大叔找到了react-scripts相关源码。

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - react-scripts-hero
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-1)

本文就对react-scripts做个初步解析,并试图修改一下create-react-app初始化出来的范例源码。本文测试环境:win10/react-scripts2.1.1

查找react-scripts路径

react-scripts这个路径还是比较好找的,位于\node_modules\react-scripts\

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - 目录结构
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-2)

目录结构也比较好理解,config里面放了一些基本配置,scripts放置了具体能做什么的脚本逻辑,template这个目录,就是默认的项目结构了。

config目录

进入config目录之后,就可以发现一系列的webpack的相关文件出现了。所以,其实这个react-scripts的背后逻辑就是webpack了。所以,以往的webpack相关经验,也许是可以派得上用途的。

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - react-scripts-config
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-3)

config/paths.js这个文件里面,对默认项目结构的各个文件功能,进行了规划。比如,哪个文件是首页?关于每个目录或者文件的功用问题,可以从这里找到答案。

scripts目录

这个目录的内容,可以对照package.json里面的scripts节点进行观察了。每个js文件,就代表了react-scripts的一个功能,所以说逻辑还是非常清晰的。

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - react-scripts-action
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-4)

template目录

这个目录就非常非常重要了,因为里面存放的是默认项目的目录结构!如果,你想更改默认项目的结构或者逻辑的话,就直接修改这里就可以了。你懂的!

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - react-template
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-5)

修改默认项目默认首页

默认首页有点玄幻,苏南大叔把它改成大家最喜欢的hello world来试试看。当然,下面的这个文件是项目根目录下面的,并不是node_modules/react-scripts/目录下面的。

此时,需要的命令是:

npm start

src/index.js

newsn.net:这里是【评论】可见内容

这样修改之后,就可以看到最亲切的helloworld字样了。

苏南大叔:初步理解 react-scripts ,修改第一个 helloworld 例子 - react-app-modify
初步理解 react-scripts ,修改第一个 helloworld 例子(图6-6)

注意:在chrome浏览器里面,修改源文件,就可以直接在浏览器里面看到相关修改效果。这个应该得益于webpack的热加载功能。但是在全世界最落后的ie浏览器中,却没有这种的热加载效果的。所以,推荐使用chrome浏览器调试react程序。

相关链接

如果您想修改react-scripts的配置文件,那么您可以查看下面这个链接:

结束语

本文中,对create-react-app脚手架自带的,react-scripts脚本的基本原理,苏南大叔做了粗略的分析,并进行了简单的修改,以验证对其的简单分析理论。

更多精彩内容,请查看苏南大叔的react精彩文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   react

本站的忠实读者小伙伴,正在阅读下面这些文章: