一React初体验之NodeJS环境搭建

Posted GeoChen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一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兼容性的问题。

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

以上是关于一React初体验之NodeJS环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

Android开发学习之路--React-Native混合开发初体验

初体验Hadoop-伪分布环境的搭建

Go+之环境安装与程序初体验

在ubuntu上进行React-Native开发之环境搭建

TypeScript之面向对象初体验

GoGo入门之初体验(Windows版)