create-react-app 构建 react应用程序（一）（react-scripts）

ゞ浴缸里的玫瑰 2022-06-13 14:36 323阅读 0赞

踩了一个坑又一个坑，以前都是自己手动创建react的开发环境，要安装webpack、babel、react、react-dom的组件，还需要修改、新增各种配置文件。  
正为这个环境新建犯愁时，突然发现了 react-scripts。用来构建了一个项目试试：  
第一步：全局安装下create-react-app。

npm install -g create-react-app

第二步：通过create-react-app来创建项目

create-react-app demo-app

第三步：使用webStorm来打开项目，为了调试router4的相关功能，所以添加对react-router-dom的依赖。

cnpm install --save-dev react-router-dom

第四部：执行

npm start

这时候浏览器会自然打开默认的index.html。自然可以看到相应的界面效果

查看项目文件结构如下：  
![这里写图片描述][SouthEast]  
神奇的发现，竟然没有webpack.config.js文件。点开package.json文件，看看start对应的脚本：

"start": "react-scripts start",

点开package.json，发现依赖也非常的少。

{
      "name": "demo-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.1.1", "react-scripts": "1.0.10" },
      "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

一脸懵圈了，难道使用react-scripts了就不需要依赖babel、webpack、css-loader等了，又去找了一圈react-scripts的作用和原理，才明白这一切又长见识了，下节来介绍react-scripts实现的原理咯

[SouthEast]: /images/20220613/c88518f9bf51492c85811d817539b129.png