create-react-app源码解析(一),npm run start如何让项目跑起来

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zjscy666/article/details/82631582

    小编花了点时间,大致弄懂npm run start如何运行项目的原理了,现在给大家分享下心得!npm run start是通过node跑js文件,从而项目得以运行,小编通过npm run eject拿到了所有配置,然后通过解析源码,明白了如果通过webpack等让项目dev环境下跑起来的!

    说白了很简单,就是通过node跑入口的js文件,然后webpack进行跑项目,下面是配置的文件夹

     

    env.js就是环境变量的各种配置js,path.js就是各个文件路径的配置js,polyfills.js是打包的时候兼容低版本浏览器的配置js,剩下的3个webpack相关的文件就是生产和开发环境的js,和一个webpack服务器的配置js。

    上面不是我们今天的内容,我们今天的内容在下面的这张图

    

    聪明的你一定已经猜测到了,我们今天要讲的就是start.js。npm run start就是跑这个文件的,下面我们来看几段核心的代码!

    

    这个是用来动态声明node各个环境的,process代表node执行过程的进程监控,你可以从中拿到所有你想要的关于进程监控的变量,进行下一步操作。

   

  这个代表在node进程中如果出错,触发抛出error,让码农能够清楚哪步出问题了。

  

    这部分是引入变量,聪明的你一定可以看到下面4句代码,require('../config/env'),const paths = require('../config/paths'),const config = require('../config/webpack.config.dev'),const createDevServerConfig = require('../config/webpackDevServer.config')。没错,这4句代码就是从刚刚的配置中获取相应的配置。

    

    这段代码是核心,正是通过这段代码,我们的项目得以跑起来,通过一些npm包,具体的包的功能读者可以自行去看,小编这里带大家大致过下每行代码代表的意思。protocol这个变量代表了请求的协议是http还是https,appName是你项目的名称,urls代表了按照protocol等信息我们获得的url的开始一部分,例如http://127.0.0.1:3000,compiler代表创造一个webpack编译,把你的代码编译成浏览器能运行的代码,proxySetting,proxyConfig,serverConfig代表的是设置代理和获得对应的服务配置,devServer代表的是把编译的配置compiler和服务的配置serverConfig传入,获得的启动服务。

    

    熟悉node的童鞋都知道,必须通过listen启动端口,用户才能看到,所以我们把上面的devServer再度启动,我们就能看到界面了。

    以上就是npm run start的全部过程,聪明的你看完这篇文章一定会有巨大的启发吧!

猜你喜欢

转载自blog.csdn.net/zjscy666/article/details/82631582