Grunt+browserify 中使用babel解析jsx语法

场景：grunt的构建的项目想要接入react或者vue组件

思路：尝试使用ReactDOM.render、vue的h函数实现渲染组件

实践问题：项目jq编写，如何识别编译jsx语法？

一顿查找发现babel就能解析jsx语法

于是在Grunt配置中加入babel,在browserify中使用babelify做转换

并安装babelify（npm i babelify)

//Gruntfile.js
...

    browserify: {
      options: {
        browserifyOptions: {
          debug: false
        },
        globals: {
          jQuery: true
        },
        transform: [
          [ 'babelify']
        ],
        plugin: []
      },
      watch: {
        options: {
          watch: true
        },
        files: {
          'dist/index.js': [ 'src/**/*.js' ]
        }
      },
      app: {
        files: {
          'dist/index.js': [ 'src/**/*.js' ]
        }
      }
    },
    ...

babel的配置

//babel.config.js
module.exports = {
    presets: [ "@babel/preset-env", "@babel/preset-react" ],
    plugins: [ "@babel/plugin-transform-react-jsx" ]
}