什么是 gulp-react
gulp-react 是一个非常棒的 gulp 插件，它可以帮助我们编译 React 代码并转化为可执行的 JavaScript 代码，这样我们就可以使用 ES6 或者 JSX 的写法来编写 React 组件了。
安装 gulp-react
使用 npm 包管理器，我们可以很容易将 gulp-react 安装到我们的项目里：
npm install --save-dev gulp-react
使用 gulp-react
引入 gulp-react
const gulp = require('gulp');
const react = require('gulp-react');创建任务
gulp.task('compile-react', function () {
return gulp.src('src/**/*.js')
.pipe(react())
.pipe(gulp.dest('dist'));
});任务解释
上面代码中，我们首先创建了一个 gulp 任务，这个任务就是用来编译我们的 React 代码的。在这个任务中，我们使用 gulp.src 方法来指定要处理的文件，通常是一些 xx.js 或者 xx.jsx 的文件，我们使用 **/* 表示 src 目录下的所有文件。
接着，我们使用 gulp-react 将我们的 React 代码编译成普通的 JavaScript 代码，这个过程会将我们的 ES6 和 JSX 语法转化成可执行的 JavaScript 代码。
最后，我们将编译好的文件保存到 dist 目录下，这样我们就可以直接使用编译后的代码了。
实战示例
下面，我将演示一个简单的 React 示例，来帮助大家更好地理解 gulp-react 的使用。
我们的 src/index.jsx 文件内容是这样的：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ ------- --------------- -
-------- -
------ ---------- ------------------------
-
-
----------------
------------- ----------- ---
-------------------------------
--我们的 gulpfile.js 文件内容是这样的：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
-------------------------- -------- -- -
------ ------------------------
--------------
-------------------------
---
-------------------- -------------------直接执行 gulp 命令即可将我们的 React 代码编译成 JavaScript 代码，并保存在 dist 目录下。
至此，我们就掌握了 gulp-react 的基本使用方法，并且也学会了如何使用 gulp 工具来打包我们的 React 项目了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64428