create-react-app源码解析（一），npm run start如何让项目跑起来

    小编花了点时间，大致弄懂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的全部过程，聪明的你看完这篇文章一定会有巨大的启发吧！