如何在 Babel 中使用 BigInt 取幂？

Question

考虑一下：

const a = BigInt(2);
const b = BigInt(2);
const c = a ** b;

Babel 会将其转换为：

var a = BigInt(2);
var b = BigInt(2);
var c = Math.pow(a, b);

但是，Math.pow不适用于BigInt. 据我所知，让 Babel 忽略某行是不可能的。我找到了babel-plugin-transform-bigint，但我不想为此加载 polyfill。如果BigInt不支持，那么我将只为输入设置一个上限。

我的选择是覆盖Math.pow或手动实现幂运算。目前是否无法将本地**运算符与BigIntBabel 一起使用？

另外，只是确认一下，**如果不支持它会是一个语法错误吗？

编辑：babel.config.js：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: '2',
      exclude: [
        'babel-plugin-transform-async-to-generator',
        'babel-plugin-transform-regenerator',
      ],
    }],
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
    '@babel/plugin-proposal-do-expressions',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
    /*
    Async/await increases file size by a lot.
    ['module:fast-async', {
      'compiler': { 'promises': true, 'generators': false, 'useRuntimeModule': true },
    }],
    ['@babel/plugin-transform-modules-commonjs', {
      'strictMode': false,
    }],
    */
  ],
  env: {
    production: {
      plugins: ['transform-react-remove-prop-types'],
    },
  },
  sourceType: 'unambiguous',
};

Answer 1

对于那些在Create React App中遇到此问题的人。请参阅以下主题和解决方案：

https://github.com/0xs34n/starknet.js/issues/37#issuecomment-955797303 和 https://github.com/babel/babel/issues/13109#issuecomment-826287089

基本上你可以改变browserlist你的package.json以防止 babel 运行它的transform-exponentiation-operator插件，如下所示：

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

对于非浏览器反应环境，例如react-native-macos、react-native-windows、electron，请参阅此处的要点，了解创建自己的环境以babel.config.js选择要运行的插件/转换的方法：

https://gist.github.com/karanjthakkar/3241808022a75d8068f35a33b57e90c5

有一个推特线程解释了这个问题： https://twitter.com/geekykaran/status/1082218546799755266

babel.config.js没有应用的示例babel-plugin-transform-exponentiation-operator：

const lazyImports = require('metro-react-native-babel-preset/src/configs/lazy-imports');

module.exports = (api) => {
  api.cache(true);
  return {
    comments: false,
    compact: true,
    plugins: [
      '@babel/plugin-transform-flow-strip-types',
      '@babel/plugin-proposal-optional-catch-binding',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-block-scoping',
      ['@babel/plugin-proposal-class-properties', {
        loose: true,
      }],
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-syntax-export-default-from',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-computed-properties',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-destructuring',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-function-name',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-literals',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-parameters',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-shorthand-properties',
      '@babel/plugin-transform-react-jsx',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-regenerator',
      '@babel/plugin-transform-sticky-regex',
      '@babel/plugin-transform-unicode-regex',
      '@babel/plugin-proposal-export-default-from',
      [
        '@babel/plugin-transform-modules-commonjs',
        {
          strict: false,
          strictMode: false, // prevent "use strict" injections
          lazy: importSpecifier => lazyImports.has(importSpecifier),
          allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
        },
      ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-classes',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-arrow-functions'
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-spread',
      '@babel/plugin-proposal-object-rest-spread',
      // SUPPORTED BY DEFAULT: [
      // SUPPORTED BY DEFAULT:   '@babel/plugin-transform-template-literals',
      // SUPPORTED BY DEFAULT:   {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
      // SUPPORTED BY DEFAULT: ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-exponentiation-operator',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-object-assign',
      // SUPPORTED BY DEFAULT: ['@babel/plugin-transform-for-of', {loose: true}],
      // 'metro-react-native-babel-preset/src/transforms/transform-symbol-member',
      '@babel/plugin-transform-react-display-name',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      ['@babel/plugin-transform-runtime', {
        helpers: true,
        regenerator: true,
      }],
    ],
  };
};

使用 npm/yarn 重新启动捆绑器时请记住重置缓存

npm start -- --reset-cache