闲话少说,直接开撸代码
初始化环境
首先保证 node 和 npm 环境,运行 node -v
和 npm -v
。
如果环境已存在,进入项目目录,运行npm init
生成 package.json,所用的项目使用npm做依赖,package.json中描述了该项目的信息以及一些第三方依赖(插件),详细的使用说明可查阅官网文档,不过是英文的。
安装插件
webpack需要插件进行支撑,运行npm install webpack webpack-dev-server --save-dev
来安装两个插件。
安装React环境,也需要插件进行支撑,运行npm i react react-dom --save
来安装两个插件,其中i
是 install
的简写。
安装完成之后,package.json 可以看到多了devDependencies
和dependencies
两项,根目录也多了一个node_modules文件夹。
--save 和 --save-dev 的区别
使用--save
和--save-dev
,可分别将依赖(插件)记录到package.json中的 dependencies和 devDependencies下面。
dependencies下记录的是项目在运行时必须依赖的插件,常见的例如react
jquery
等,即及时项目打包好了、上线了,这些也是需要用的,否则程序无法正常执行。
devDependencies
下记录的是项目在开发过程中使用的插件,例如这里我们开发过程中需要使用webpack打包,而我在工作中使用fis3
打包,但是一旦项目打包发布、上线了之后,webpack
和fis3
就都没有用了,可卸磨杀驴。
延伸一下,我们的项目有package.json,其他我们用的项目如webpack也有package.json,见./node_modules/webpack/package.json
,其中也有devDependencies
和dependencies
。当我们使用npm i webpack
时,./node_modules/webpack/package.json
中的dependencies会被 npm 安装上,而devDependencies也没必要安装。