一、React初体验之NodeJS环境搭建

zj2092

　　一、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兼容性的问题。
　　欲知后事如何，请点下一篇文章。


　　作者： GeoChen
　　出处： http://www.cnblogs.com/GeoChen>
　　本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 原文链接 如有问题， 可邮件（giser_xiaochen@163.com）咨询.