javascript - 语法错误 : Identifier directly after number

Question

我正在使用一个以这种方式定义颜色的库:500_。在库的代码中每次提到这一点都会引发语法错误。
在我 friend 的电脑上可以正常使用，请问如何解决？
调色板.js:

import { alpha } from '@material-ui/core/styles';

function createGradient(color1, color2) {
  return `linear-gradient(to bottom, ${color1}, ${color2})`;
}

// SETUP COLORS
const GREY = {
  0: '#FFFFFF',
  100: '#F9FAFB',
  200: '#F4F6F8',
  300: '#DFE3E8',
  400: '#C4CDD5',
  500: '#919EAB',
  600: '#637381',
  700: '#454F5B',
  800: '#212B36',
  900: '#161C24',
  500_8: alpha('#919EAB', 0.08),
  500_12: alpha('#919EAB', 0.12),
  500_16: alpha('#919EAB', 0.16),
  500_24: alpha('#919EAB', 0.24),
  500_32: alpha('#919EAB', 0.32),
  500_48: alpha('#919EAB', 0.48),
  500_56: alpha('#919EAB', 0.56),
  500_80: alpha('#919EAB', 0.8)
};

错误:

Failed to compile.

./src/theme/overrides/Input.js
Syntax error: Identifier directly after number (24:53)

  22 |         underline: {
  23 |           '&:before': {
> 24 |             borderBottomColor: theme.palette.grey[500_56]
     |                                                      ^
  25 |           }
  26 |         }
  27 |       }

错误:

Failed to compile.

./src/components/charts/BaseOptionChart.js
Syntax error: Identifier directly after number (20:50)

  18 |         border: '0 !important',
  19 |         fontWeight: theme.typography.fontWeightBold,
> 20 |         backgroundColor: `${theme.palette.grey[500_16]} !important`,
     |                                                   ^
  21 |         color: theme.palette.text.secondary
  22 |       },
  23 |       '.apexcharts-xaxistooltip-bottom': {

Answer 1

感谢所有帮助过的人，这确实是一个 babel 问题。
简而言之，全局安装即可修复:

npm install --save-dev @babel/plugin-proposal-numeric-separator