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

踩了一个坑又一个坑，以前都是自己手动创建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。自然可以看到相应的界面效果

查看项目文件结构如下：



神奇的发现，竟然没有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实现的原理咯