时间戳

首页 > 解决方案 > 使用 NextJS 定位边缘时，不会转译 Rest-spread

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

问题描述

我正在尝试通过 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
    }
  }
};

对此的任何帮助将不胜感激！

标签： ecmascript-6babeljsmicrosoft-edgenext.js

解决方案

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

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

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

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

推荐阅读