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

Question

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

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

如果我们给它 global，它 'sets' 将结果导入 umd 包中的 global。

但是在使用 sapper 时使用做同样的事情将模块保持为外部，然后服务器构建正常工作，但客户端构建不考虑全局变量，而是尝试在浏览器中执行 'import'，并且失败，出现 TypeError ,

': Failed to resolve module specifier “…”' .

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

Answer 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.

中的文件

external, and globals in sapper client build using rollup