一React初体验之NodeJS环境搭建

Posted 2020-07-11 GeoChen

一、NodeJS安装

　　我博客中有相关文章，此处不再赘述。

二、相关模块安装

　　在使用React的时候需要安装一些相关模块：

1、babel

　　npm install babel -g --save-dev

　　（其中，--save-dev表示将babel模块放入当前项目的package.json文件的devDependencies下，表示当前开发环境的依赖模块。

　　　　--save表示将babel模块放入当前项目的package.json文件的Dependencies下，表示当前运行环境的依赖模块。）

　　babel主要作用是将代码中相关ES6语法转换成目前大多数浏览器接受的ES5。

2、webpack

　　npm install webpack -g --save-dev

　　webpack主要作用是将当前项目资源进行打包，生成一个JS文件，用于前端页面引入加载。

3、webpack-dev-server

　　npm install webpack-dev-server -g --save-dev

　　webpack-dev-server主要作用是创建服务器。

具体要了解模块安装相关方法请移步： http://javascript.ruanyifeng.com/nodejs/npm.html#toc8

三、创建项目根文件package.json

　　这个文件主要对当前项目的各种信息进行统计，如项目名称、版本、依赖、开发环境依赖等等。

　　创建这个文件用npm init，之后根据提示填写相关内容即可。（如果不想填，可以用npm init --yes或npm init --y），之后在package.json中继续添加修改。

{
  "name": "AppTest",　　//项目名称
  "version": "1.0.0",　　//项目当前版本
  "main": "main.js",　　//加载模块时的入口文件，所有的模块最终都汇聚在这儿
  "dependencies": {　　//项目运行时的依赖模块

  },
  "devDependencies": {　　//项目开发时依赖的模块

　},
  "scripts": {　　//编写执行npm run <命令> ，如运行npm [run] start相当于执行了webpack-dev-server --hot
　　　"start": "webpack-dev-server --hot" 
　},
　"keywords": [],
　"author": "", 
　"license": "ISC",
　"description": "" ,
}

package.json文件中各项的含义详情，请移步：http://javascript.ruanyifeng.com/nodejs/packagejson.html

 四、添加相关的插件

1、React相关的插件

①npm install react --save

react的核心模块。

②npm install react-dom --save

react中用于将创建的virtual组件渲染到dom上。

2、Babel相关插件

npm install babel-core 

npm install babel-loader

npm install babel-preset-react

npm install babel-preset-es2015

这些模块主要处理ES6兼容性的问题。

后续还会更新，敬请关注。