时间戳

首页 > 解决方案 > 使用汇总的 sapper 客户端构建中的外部和全局变量

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

问题描述

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

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

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

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

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

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

标签： svelterollupjssapper

解决方案

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

import foo from 'foo';

那么你的服务器代码将有类似的东西

const foo = require('foo');

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

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

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

然后<script>在你的标签中添加一个src/template.html指向static.

推荐阅读