Javascript 如果未定义，如何添加全局变量

The main issue is that node_modules/d3/d3.js file uses the this keyword.
Specifically it reads this.document, instead of window.document or simply directly accessing the global document variable.
So the actual question should be: Is it possible to define this for d3 in Vite.

您看到，当您使用http服务器测试时，d3工作得很好，您可以从index.html文件加载脚本.

It worked because you loaded it using <script type="text/javascript">.
This is because in old script files the default value for top-level this is window.

如果您try 使用<script type="module">来加载它，就像vite所做的那样，它不会起作用，因为对于模块脚本，顶级this变量是undefined.

Vite确实有一个通过在vite.config.js中定义替换来替换变量的选项，但由于其实现方式的原因，它有很多限制:

Entries will be defined as globals during dev and statically replaced during build.

在dev模式下，这对我们来说毫无用处，因为您不能将this定义为全局变量.隐含地，我们也不能定义this.document的替代品.

During build we have a similar problem for a different reason. Vite can replace this, but only in the top level. Unfortunately d3 is wrapped in a function(){} and Vite does not want to replace this inside of functions, since this is seen as a local variable and Vite doesn't want to replace local variables.
It doesn't matter if you tried defining this:'window' or if you try being specific by defining 'this.document':'window.document'.

我在文档中没有发现任何可能对我们有用的东西，所以不太可能使用VITE配置来解决这个问题.

我猜他们不想与官方违约背道而驰，所以他们没有为这一点设立选项.

不幸的是，this不是你可以自己填充的东西.

这只给我们留下了我昨天在 comments 中提到的解决方案，即编辑d3源代码.至少这一变化很小.

First copy node_modules/d3/d3.js file to your source folder.
(you should never edit files in node_modules since npm or yarn might overwrite those changes; and pnpm even uses symbolic links, so it shared the same file for all projects)

然后，您必须将第一行和最后一行替换为:

!function() {
  // ...
}()

致:

(function() {
  // ...
}).call(window)

当然，您必须替换您的导入语句来导入这个新文件，而不是从NODE_MODULES导入d3.

As for node_modules/d3/index.js you can actually skip that file instead of adding polyfills for it.
In later patches like 3.5.17 it was even removed.
All it does is handle the global d3 variable.