当使用 NextJS 定位边缘时，Rest-spread 不会被转译

Question

我正在尝试通过 Babel 转换我的 ES6 代码，我正在使用 next/babel 预设以及 preset-env 并且我正在使用 browsers: defaults 目标。

NextJS 预设在其插件数组中带有 @babel/plugin-proposal-object-rest-spread，我想知道为什么在显示 Expected identifier, string or number 的边缘测试时以及在编译的 JS 中查找时出现错误错误，我看到它发生在 {...t} 发生时。

这是我的 babel.config.js:

module.exports = {
  presets: [
    [
      'next/babel',
      {
        '@babel/preset-env': {
          targets: {
            browsers: 'defaults'
          },
          useBuiltIns: 'usage'
        }
      }
    ]
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    ['styled-components', { ssr: true, displayName: true, preprocess: false }],
    [
      'module-resolver',
      {
        root: ['.', './src']
      }
    ]
  ],
  env: {
    development: {
      compact: false
    }
  }
};

如有任何帮助，我们将不胜感激！

Answer 1

SCRIPT1028：预期的标识符、字符串或数字错误可能在两种情况下发生。

(1) 如果您在 JavaScript 对象中的最后一个属性之后使用尾随逗号，则会触发此错误。

示例：

var message = {
    title: 'Login Unsuccessful',
};

(2) 如果您使用 JavaScript 保留字作为属性名称，则会触发此错误。

示例：

var message = {
    class: 'error'
};

解决方案是将 class 属性值作为字符串传递。但是，您需要使用方括号表示法在脚本中调用属性。

参考：

ERROR : SCRIPT1028: Expected identifier, string or number

Answer 2

最后我的问题与一个没有被 babel 转译的包有关。我的解决方案是使用 NextJS 的 next-transpile-modules 插件让 babel 将包代码转换成可以在我需要的浏览器上运行的东西。

这是我的 NextJS webpack 配置示例，其中指定了我需要转译的包：

const withTM = require('next-transpile-modules');

module.exports = withTM({
  transpileModules: ['swipe-listener']
});

当使用 NextJS 定位边缘时，Rest-spread 不会被转译

Rest-spread not being transpiled when targeting edge with NextJS

ecmascript-6

babeljs

microsoft-edge

next.js