前言
项目中经常会遇到想要单独摘取出来、放入自己储备知识里的代码或组件，或者基于自身兴趣对某些领域的项目想要纳入囊中，于是需要搭建自己的项目脚手架。
看到需要的知识或者感兴趣的知识，将其消化并存储、应用，学习的过程无非于此，这也是一个技术人员漫长的成长之路。
目前最常用的流行框架无非 react \ vue，而vue拥有官方脚手架搭建工具——vue-cli，react也有。
告别从 npm init 到配置package.json那些繁琐的刀耕火种时代，享受一行代码直达终点的高速列车。
安装 create-react-app 脚手架
npm install -g create-react-app
创建项目
npx create-react-app project-name
进入项目
cd project-name
运行项目
npm start
注意项目默认端口为localhost:3000，如果该端口被占用，cmd会自动提示是否要切换另一个端口。这时选择yes，就会切换到3001端口：
全部成功后浏览器会打开脚手架默认页面：
脚手架原始目录结构
- node_modules为通用模块插件文件夹
- public为公共资源文件夹，如网页图标ico、入口html、mock json文件等
- src即为你即将编写业务代码的文件夹，初始化了一些基础配置文件
- package.json以及package-lock.json文件存放项目的一些基本信息如名称、版本、所需模块以及版本号锁定等
- README.md为作者编写的项目信息，介绍如何使用等
package.json结构
一个react项目，最基本的指令和配置都会写在该文件中。此脚手架的packge.json如下：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
可以看到，该配置非常纯粹，可以自己加一些依赖。其中的eject下面会详细讲解。
手动配置config
细心的读者会发现，目录中并没有任何config配置文件。这是因为脚手架已经自动配置了许多依赖如Webpack, Babel, ESLint, etc等。
如果你觉得这些配置对于你的项目来说并不够用，或者就是不放心脚手架的自动配置，那么脚手架提供了一行指令：
npm run eject
使用完该指令后，你会发现项目结构发生了神奇的变化：
1.目录中多了一个config文件夹，其中包含了通用的配置文件
2.package.json文件中的eject指令配置消失了，也就是说无法再次执行该指令
关于这个过程，有两点需要注意：
- 操作过程不可逆
- 事后的配置实际上和之前一致，只是现在已经可以手动配置你想要的config了
尾语
新世纪的大门已经开启，在你自己的项目里，你就是主宰一切的上帝，创造万物。
