gulp html 模块化,React项目-模块化gulp

react组件的特点：所有组件都写在一个js文件里，不好维护，写多个js去引入无法识别。通过browser.js将jsx转换成js，性能慢。

如何解决？借助前端构建工具webpack(FaceBook为react量身打造的构建工具)，主要作用是实现模块化、代码整合、代码分割的作用。

一、React------gulp的环境搭建

1️⃣安装react、react-dom  [ npm i react react-dom -S ]

2️⃣安装gulp运行环境、browserify是jsx  [ npm i gulp browserify babelify vinyl-source-stream -D ]

3️⃣解析es5和react的语法需安装  [ npm i babel-preset-es2015 babel-preset-react -D ]

4️⃣项目初始化 [ npm init ]

5️⃣新建src的文件，在根目录下新建入口文件index.js、文件index.html

index.html

index.js

6️⃣gulp的环境配置的文件gulpfile.js [ task任务、src、dest存储目标、pipe、watch、run ]

gulpfile.js

7️⃣优化文件，bundle.js文件很大，可以优化  [ npm i browserify-shime -D]

优化文件

8️⃣模块化的打包操作gulp-webpack [ npm i gulp-webpack -D ]