在 nextjs 中开发时禁用 es5 转译

Question

有没有办法在 中禁用 es5 代码（例如异步函数）的转译next dev？

设置 babel preset-env 不起作用，之前的答案也不再起作用。

在 package.json 中设置 browserlist 目标仍然会转换代码

Answer 1

截至 2023 年 1 月，我发现了一些标志可以帮助您顺利完成任务。

const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
  webpack: (config, { dev }) => {
    if (dev && Array.isArray(config.target) && config.target.includes('web')) {
      config.optimization.minimize = false;
      delete config.optimization.minimizer;
      config.target = ["web", "es2020"];
    }
    return config;
  }
};

if (!isProd) {
  nextConfig.experimental = {
    legacyBrowsers: false,
  };
}

module.exports = nextConfig;

这将禁用旧版浏览器支持并使用您的浏览器列表进行 SWC，然后还会更改 Webpack 的目标。并没有完全消除转译，但它比默认的要好得多

另外，nextjs 现在支持 package.json 中的 browserslist -源

将以下密钥添加到 package.json 将默认启用大多数功能：

{
  "browserslist": [
    "chrome 109"
  ]
}