从零构建react项目（一）

想要编写react项目，已经有很多非常方便的工具链供我们使用了，基本上可以做到开箱即用例如：creact-react-app 等
但我们除了直接上手写业务以外，对于一些幕后工作也要有所了解，才能更好的优化项目配置，优化业务代码。

一组工具链通常是由：

• 一个package管理器， 可以让你利用第三方生态系统，轻松安装或更新依赖， 这里我们选择npm
• 一个打包器，可以让你编写模块化代码，并且打包优化加载时间，这里我们选 webpack
• 一个编译器， 可以编写新版本的Javascript不需要考虑兼容问题， 我们选Babel

建立目录

首先新建项目文件：my-react
mkdir my-react && cd my-react
mkdir -p src

初始化项目

npm init -y
这个时候项目目录下会出现一个 package.json 文件，这是我们项目的模块配置文件

配置webpack

我们要构建react项目，需要用到 jsx和es6 语法， 但目前的浏览器是不能直接识别的，所以需要有工具帮我们编译转化代码，我们在这里选择了webpack。

安装webpack

npm install webpack webpack-cli --save-dev
安装webpack-cli工具可以在命令行中运行webpack
此时文件目录
C:.
| package.json
| package-lock.json
|–node_modules
|–src

---

补充知识点：

• npm install moduleName
  安装模块到项目的node_modules目录下，不会将模块依赖写入package.json文件，初始化项目时不会下载模块
• npm install -g modulesName
  安装模块到全局，不会在node_modules目录下，不会将模块依赖写入package.json文件，初始化项目时不会下载模块
• npm install -save moduleName
  安装模块到node_modules目录下，将模块依赖写入dependencies 节点，初始化项目时会下载模块，运行npm install --production 或者注明 NODE_ENV变量为production时，会下载模块
• npm install --save-dev moduleName
  安装模块到node_modules目录下，将模块依赖写入devDependencies 节点，初始化项目时会下载模块，运行npm install --production 或者注明 NODE_ENV变量为production时，不会下载模块
  总结：devDependencies 节点下的模块是我们在开发时需要用的，例如 webpack、压缩css、js的模块，这些模块在项目部署后是不需要的。想express是项目运行必备的，应该安装在dependencies节点下。

---

配置webpack

webp