前言

项目中经常会遇到想要单独摘取出来、放入自己储备知识里的代码或组件，或者基于自身兴趣对某些领域的项目想要纳入囊中，于是需要搭建自己的项目脚手架。

看到需要的知识或者感兴趣的知识，将其消化并存储、应用，学习的过程无非于此，这也是一个技术人员漫长的成长之路。

目前最常用的流行框架无非 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端口：

cmd成功界面

全部成功后浏览器会打开脚手架默认页面：

脚手架默认首页

脚手架原始目录结构

项目目录

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了

尾语

新世纪的大门已经开启，在你自己的项目里，你就是主宰一切的上帝，创造万物。

使用create-react-app搭建轻量级react项目脚手架

前言