一、React初体验之NodeJS环境搭建
一、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)咨询.