让 Snowpack 与 Babel 一起工作，“require is not defined”。我错过了需求转换吗？

Posted 2023-02-16

【中文标题】让 Snowpack 与 Babel 一起工作，“require is not defined”。我错过了需求转换吗？

【英文标题】：Making Snowpack work with Babel, "require is not defined". Am I missing a require transformation?

【发布时间】：2021-03-14 19:50:03

【问题描述】：

我正在接近 Snowpack，以前使用过 Webpack + Babel 加载器。我遗漏了一些东西，我知道是什么：某种require polyfill 或转换。我不知道使 require 在浏览器中工作的 Webpack 内部原理，但我无法使用 Snowpack。

在我的snowpack.config.json 中，我正在加载 Babel 插件：

  "buildOptions": 
    "clean": true,
    "out": "dist"
  ,
  "mount": 
    "src": "/"
  ,
  "plugins": [
    "@snowpack/plugin-babel"
  ]

我的.babelrc 正在使用@babel/preset-env：

  "presets": [
    ["@babel/preset-env", 
      "corejs": 3,
      "useBuiltIns": "usage"
    ]
  ]

使用snowpack build 将测试脚本转换为：

"use strict";

require("core-js/modules/es.array.concat");

require("core-js/modules/es.array.map");

// Import polyfill
document.addEventListener('DOMContentLoaded', function () 
  [1, 2, 3].concat([4, 5]).map(function (n) 
    return console.log(n);
  );
);

window.addEventListener('load', function () );

（问题当然是require没有定义）

【问题讨论】：

webpack 不会按原样保留已转译的文件，而是将它们捆绑在一起。我也无法与雪包一起使用。我希望它可以使用 targets.esmodules: true 设置或不使用 preset-env... 无论如何都没有运气！

【参考方案1】：

Babel 仍然使用您的配置将 import 语句转换为 require。为了防止这种情况，请尝试以下配置：

  "presets": [
    ["@babel/preset-env", 
      "targets": 
        "esmodules": true
      ,
      "modules": false
    ]
  ]

您可以使用其他设置对其进行扩展，但这应该是最小的工作设置。

正如我在 cmets 中提到的，没有 modules: false 它仍然可以转换为 require 语句，因此您必须覆盖默认行为 as per docs