流式导入时 Snowpack 构建失败

如何解决流式导入时 Snowpack 构建失败

我使用的是 SnowPack 3.3.7（虽然 snowpack --version 说的是 3.3.6）。我已经在全球范围内通过 npm 安装了它。

运行 snowpack dev 时一切正常。

当我运行 snowpack build 时，我得到 Do not know how to load path build/_snowpack/pkg/date-fns。

date-fns 是 SkyPack 提供的库，所以我选择了它。

这是我的snowpack.config.js：

module.exports = {
  mount: {
    "sourcecode": "/"
  },optimize: {
    minify: true,treeshake: true,target: 'es2020'
  },packageOptions: {
    source: "remote"
  },buildOptions: {
    clean: true
  },};

这是/sourcecode/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">    
  </head>
  <body>
    <h1>Snowpack Lab</h1>    
    <button id="actionButton">Say Hello</button>
    <script type="module" src="./index.js"></script>
  </body>
</html>

然后/sourcecode/index.js

import { format } from 'date-fns';

export function sayHello() {
  let dateString = format(new Date(),'MMMM dd,yyyy');
  alert(`Hello. Today is ${dateString}`);
}

document.getElementById('actionButton').addEventListener("click",e => {
  sayHello();
});

当我运行 snowpack build 时，我在终端上得到以下输出：

(node:3868) ExperimentalWarning: The fs.promises API is experimental
(node:3868) ExperimentalWarning: The dns.promises API is experimental
[16:24:29] [snowpack] ! building files...
[16:24:29] [snowpack] import date-fns@latest → https://pkg.snowpack.dev/date-fns
[16:24:29] [snowpack] pin dependency to this version: `snowpack add date-fns`
(node:3868) ExperimentalWarning: Readable[Symbol.asyncIterator] is an experimental feature. This feature could change at any time
[16:24:30] [snowpack] ✔ files built. [1.01s]
[16:24:30] [snowpack] ! building dependencies...
[16:24:30] [snowpack] ✔ dependencies built. [0.00s]
[16:24:30] [snowpack] ! writing to disk...
[16:24:30] [snowpack] ✔ write complete. [0.01s]
[16:24:30] [snowpack] ! optimizing build...
 > build/index.js:1:23: error: Do not know how to load path: build/_snowpack/pkg/date-fns
    1 │ import { format } from './_snowpack/pkg/date-fns';

我确实得到了一个 build 文件夹，其内容与我的 sourcecode 文件夹几乎相同，但未缩小。我注意到 build/index.js 文件的导入现在是 import { format } from './_snowpack/pkg/date-fns，我认为这是有道理的。文件在那里（没有文件扩展名），它的内容只是

export * from '/_snowpack/pkg/-/date-fns@v2.21.3-Vs6fvs3gpzGLhDtcrhvq/dist=es2020,mode=imports/optimized/date-fns.js';
export {default} from '/_snowpack/pkg/-/date-fns@v2.21.3-Vs6fvs3gpzGLhDtcrhvq/dist=es2020,mode=imports/optimized/date-fns.js';

在 /build 文件夹中的任何位置都不存在。

为什么snowpack build“不知道如何加载路径”build/_snowpack/pkg/date-fns？我认为它没有因为这个错误而缩小或摇树。

顺便说一句，如果我在 date-fns 上删除 index.js 的导入引用，snowpack build 会起作用。它甚至会缩小（但不会抖动，但这是另一个问题）。

我意识到我使用 esbuild 是因为我不想处理 WebPack。我在某处读到这种构建模式还没有准备好投入生产，但我觉得 snowpack build 应该仍然有效，尽管没有优化。

我也遵循了我在某处读到的建议，我应该运行 snowpack add date-fns，然后再次运行 snowpack build，但这不起作用。我仍然遇到同样的错误。

我的配置有什么问题吗？项目结构？ html 或 js 文件？在构建输出中有什么我应该注意的吗？

流式导入时 Snowpack 构建失败

如何解决流式导入时 Snowpack 构建失败

相关推荐