JavaScript之gulp项目构建（react）

 

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

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

npm ：Node.js的包管理器

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

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

 

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

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

 

首先全局安装Node.js

 

1、创建路径和文件

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

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

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

5、在根目录下创建.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框架

1、在项目根目录下安装需要的组件

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

2、配置.babelrc文件