使用汇总的 sapper 客户端构建中的外部和全局变量

【问题标题】：external, and globals in sapper client build using rollup使用汇总的 sapper 客户端构建中的外部和全局变量
【发布时间】：2019-12-01 11:17:20
【问题描述】：

使用rollup 构建支持外部和全局。

我们可以在代码中导入一个模块，并说它是外部的，然后rollup 不会将它包含在包中。

如果我们给它全局，它会将导入结果“设置”到umd 包中的全局。

但是在使用 sapperkeeps 模块作为外部时做同样的事情，然后服务器构建正常工作，但客户端构建没有考虑全局变量，而是尝试在浏览器中进行“导入”，并且失败，使用 TypeError ，

': 无法解析模块说明符“...”'。

是否可以在sapper 客户端构建中将库保留为外部库，并指示它使用全局而不是导入？或者我在这里弄错了一些非常基本的东西？

【问题讨论】：

【解决方案1】：

当您将模块保留在包之外时，这实际上意味着import 声明保留在生成的代码中。所以如果你有类似的东西

import foo from 'foo';

那么你的服务器代码就会有类似

的东西

const foo = require('foo');

（由于 Node 模块解析算法而有效），并且在您的客户端 JS 中，您最终会得到完全相同的 import... 在浏览器中不起作用 ，因为导入路径必须是相对的。（这可能会在未来随着导入地图而改变。）

最简单的解决方案是不使用external，而让 Rollup 处理它（您可以只为客户端执行此操作）。但如果您确实想使用全局变量，您也许可以使用@rollup/plugin-virtual：

plugins: [
  virtual({
    foo: `export default window.foo`
  }),
  // ...
]

然后在您的src/template.html 中添加一个<script> 标记，该标记指向static 中的一个文件。

【讨论】：