JavaScript之gulp项目构建（react）

 

Node.js : 用于编写Web服务端程序，实质是对Chrome V8引擎进行了封装

express : 基于Node.js的Web应用开发框架

npm ：Node.js的包管理器

gulp ：基于流的代码自动化构建工具，把流程工具化来提升效率。

babel ：转换编译器，将ES6转换成能够在浏览器中运行的代码

 

全局安装：将一个模块安装到系统目录中，各个项目均可以调用。

本地安装：将一个模块下载到当前项目的node_modules子目录，而后只有在项目目录之中，才能调用这个模块。

 

首先全局安装Node.js

 

一、建立路径和文件

二、在server目录下建立ejs模板引擎express –e .

三、在根目录下安装npm依赖包npm install

四、在根目录下使用npm init建立package.json文件

五、在根目录下建立.babelrc和gulpfile.babel.js配置文件。

至此，项目基本建立完成。

 

还须要安装脚本中用到的node包，切换到当前项目路径，根据须要完成本地安装。

npm install gulp gulp-if …… --save-dev

 

安装转换编译器

npm install babel-loader babel-core babel-cli babel-preset-es2015

 

配置.babelrc文件，该文件用来设置转码规则和插件。

{"presets":["es2015"]}

 

cmd中使用gulp --watch 编译

 

done!

 

实现热更新，即更新页面内容但不须要刷新页面。在app.js文件中加上热更新模块。

浏览器中地址localhost:3000

 

 

React框架

一、在项目根目录下安装须要的组件

npm install babel-preset-react react react-dom --save-dev

二、配置.babelrc文件