kelh93/recoil-transform-with-babel

Babel转义Recoil

尝试使用babel转义recoil，使得recoil兼容IE版本

webpack 配置

编译js文件时，使用include手动指定编译范围。

• srcDir
• recoil

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader',
        include: [srcDir, path.resolve(__dirname, '../node_modules/recoil')]
      }
    ]
  }
}

babel.config.json

安装babel基础依赖 babel-loader 和 @babel/core.

  npm install babel-loader @babel/core -D

配置 presets @babel/preset-env 、@babel/preset-react

由于recoil采用了ES6+语法，所以需要设置polyfill进行兼容处理。

方案一

babel.config.json

  {
    "presets": [
      [
        "@babel/preset-env", 
        {
          "useBuiltIns": "entry",
          "corejs": {
            "version": "3",
            "proposals": true
          },
          "targets": {
            "chrome": 75,
            "ie": 10
          }
        }
      ],
      ["@babel/preset-react"]
    ],
    "plugins": [
      [
        "@babel/plugin-transform-runtime", 
        {
          "corejs": false,
          "proposals": true
        }
      ]
    ]
  }

index.js

  import 'core-js-pure/stable';
  import 'regenerator-runtime/runtime';

编译

执行 npm run build，运行dist/index.html选择 IE11打开。

运行结果，IE11报错.

  module.exports = require("regenerator-runtime");