React babel配置

用react开发企业微信的web项目，会发现在pc端的企业微信内置浏览器显示空白，即react项目没有运行，只执行到第一个index.html文件。初步发现发生这种情况的原因是pc端企业微信内置浏览器不支持es6语法，而react使用的是es6语法，知道原因后再去修改就很容易了。那是不是只要把es6语法转成其支持的es5语法即可以了呢？答案是是的。

babel安装

详细内容查看babel中文网 安装依赖：

• yarn add @babel/cli
• yarn add @babel/parser
• yarn add @babel/plugin-proposal-class-properties
• yarn add @babel/plugin-transform-react-jsx
• yarn add @babel/polyfill
• yarn add @babel/preset-flow
• yarn add @babel/preset-react
• yarn add @babel/core
• yarn add @babel/preset-env
• yarn add babel-loader

由于项目比较赶，至于为什么要安装这么多的依赖我自己也还没有弄清楚，最终依赖了这么多完全是根据安装时控制台的报错信息一步一步安装出来的。

babel配置

工程根目录下新建文件 babel.config.json，并添加内容：

{
    "presets":[
        "@babel/preset-react",
        "@babel/preset-env"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

配置比网上找的其他文章都要简单，我不知道是不是我使用了蚂蚁样式库的原因，由于主要在移动端使用，所以用了 ant design mobile 的库，package.json的配置如下，可供参考：

{
...
 "dependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/parser": "^7.11.0",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-flow": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "antd-mobile": "^2.3.3",
    "babel-plugin-import": "^1.13.0",
    "react": "^16.13.1",
    "react-app-rewired": "^2.1.6",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    ...
  },
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
 "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0"
  }
...
}

使用

此时执行 npm run build命令，将打包后的全部文件放到服务器访问目录就可以在pc端企业微信内置浏览器访问项目，且正常运行。

计划

每次修改都需要打包后检查修改的结果，我喜欢按帧编程，那么这样就特别麻烦，所以我想有没有实时转码的方式呢？