javascript - 如何在 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或手动实现求幂。是不是不能用原生的 **带有 BigInt 的运算符现在还有巴别塔？

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

编辑: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

对于那些在 中遇到此问题的人创建 React 应用程序 .请参阅以下线程和解决方案:
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 环境，例如 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