流式导入时 Snowpack 构建失败

编程问答 2022-05-02

问题描述

我使用的是 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 文件？在构建输出中有什么我应该注意的吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bundlerbundlerjavascriptsnowpackwebpackwebpackwebpack