gulp构建react项目一：gulp-react处理jsx

1、处理单个jsx脚本

安装项目依赖

cnpm i gulp gulp-react del -D
cnpm i react -S

jsx脚本

import React from 'react'

const Test = () => 
hello, world

export default Test

gulpfile.js脚本

const path = require('path')
const gulp = require('gulp')
const react = require('gulp-react')
const { series, parallel } = require('gulp')
const del = require('del')

const resolveDir = (dir) => path.resolve(__dirname, dir)

const clean = async (done) => {
  await del('./dist')
  done()
}

const _script = () => {
  return gulp.src(resolveDir('./test.jsx'))
  .pipe(react({
    es6module: true // 这里必须要添加该配置项，不然会报Illegal import declaration
  }))
  .pipe(gulp.dest('dist'))
}

module.exports.build = series(clean, _script)

在package.json添加执行命令

"scripts": {
    "build": "gulp build"
  },

当执行npm run build时，gulp会自动去执行根目录下的gulpfile.js构建脚本

执行构建时，可能会遇到如下问题

原因是gulp-react无法解析es6模块引入方式，解决方案有两种，一是改成require引入，二是在gulp-react中添加配置es6module: true。

第一张方案需要修改一下模块引入和导出方式，如下所示：

const React = require('react')

const Test = () => 
hello, world

module.exports = Test

构建后结果

const React = require('react')

const Test = () => React.createElement("div", null, "hello, world")

module.exports = Test

第二种方案构建结果

import React from 'react'

const Test = () => React.createElement("div", null, "hello, world")

export default Test

2、处理jsx模块化

目录结构

gulp01
├── src
│   ├── components
│   │   ├── Test
│   │   |   └── Test.jsx
│       └── App.jsx
├── node_modules
├── index.js
├── gulpfile.js
├── index.html
└── package.json

index.js

import './src/App.jsx'

App.jsx

import React from 'react'
import { render } from 'react-dom'
import Test from './components/Test.jsx'

render(, document.getElementById("app"))

Test.jsx

import React from 'react'

const Test = () => 
hello, world

export default Test

更改gulp.src('./index.js')，当我们对入口文件index.js进行打包时，发现仅仅打包了index.js，没有打包index.js依赖的模块。说明gulp-react没有处理模块化的能力。