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'
};

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

参考：

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定位边缘时不会传播剩余传播

2 个答案: