使用rollup
构建支持外部和全局。
我们可以在代码中导入一个模块,并将其说为外部模块,然后rollup
不会将其包含在捆绑包中。
如果我们给它全局,它会将导入结果"设置"到捆绑包中的全局umd
。
但是在使用时做同样的事情sapper
使模块保持为外部模块,然后服务器构建正常工作,但客户端构建不考虑全局变量,而是尝试在浏览器中执行"导入",并且失败了,并且 TypeError ,
':无法解析模块说明符"..."。
是否可以在客户端构建中将库保留为外部库sapper
并指示它使用全局而不是导入?或者我在这里弄错了一些非常基本的原理?
当您将模块保留在捆绑包外部时,这实际上意味着import
声明保留在生成的代码中。所以如果你有类似的东西
import foo from 'foo';
那么你的服务器代码将有类似的东西
const foo = require('foo');
(由于节点模块解析算法,这是有效的(,并且在您的客户端 JS 中,您最终会得到完全相同的import
......这在浏览器中不起作用,因为导入路径必须是相对的。(将来导入地图可能会更改此情况。
最简单的解决方案是不使用external
,而只是让 Rollup 处理它(您可以只为客户端执行此操作(。但是,如果您确实想使用全局,则可以使用@rollup/plugin-virtual
:
plugins: [
virtual({
foo: `export default window.foo`
}),
// ...
]
,然后在src/template.html
中添加指向static
中的文件的<script>
标记。