Babel REPL无法识别BigInt字面量`20n`，请问原因是什么？

First off, let's clear up a common misconception: BigInt literals (like 20n) aren't an ES6 (ES2015) feature—they were introduced in ES2020. That's probably the first key detail you were missing!

Now, onto why the Babel REPL isn't handling this syntax out of the box:

• The default REPL configuration uses @babel/preset-env with broad target settings, but it doesn't automatically enable support for post-ES2015 features unless explicitly configured. Since BigInt is an ES2020 addition, it falls into this "needs extra setup" category.
• Babel requires a specific plugin to transform BigInt syntax into ES5-compatible code: @babel/plugin-proposal-bigint.

How to Fix This in the Babel REPL #

Here's the step-by-step fix:

1. Click the Settings button in the top-right corner of the REPL interface.
2. Switch to the Plugins tab.
3. In the search bar, type @babel/plugin-proposal-bigint and select it from the results to add it to your configuration.
4. Return to the editor, and you'll see var x = 20n; now gets transformed into ES5-friendly code (typically using the BigInt() constructor instead of the literal syntax).

For Local Projects (Bonus) #

If you're working on a local project instead of the REPL, you'll need to:

1. Install the plugin via npm or yarn:

   npm install --save-dev @babel/plugin-proposal-bigint
   

2. Add it to your Babel config (e.g., babel.config.json):

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

3. For full runtime support in older environments, pair this with a polyfill like core-js: configure @babel/preset-env with useBuiltIns: 'usage' and corejs: 3 to pull in necessary polyfills automatically.

内容的提问来源于stack exchange，提问作者peter.petrov