问题标签 [snowpack]

背景

我正在尝试创建一个“无构建”JavaScript 应用程序，每次保存任何源文件时，我都不需要watch运行任务来转换 JSX、重新捆绑代码等。

它只适用于第一方代码，但是当我尝试import从 npm 依赖依赖时我被卡住了。

目标

我想实现这种工作流程：

1. npm install foo（假设它是一个 ES 模块，而不是 CommonJS）
2. 编辑source/index.js和添加import { bar } from 'foo'
3. npm run build. 某些东西（webpack、rollup、自定义脚本等）运行，并将foo其捆绑到其中./build/vendor.js（没有来自 的任何东西source/）。
4. 编辑index.html以添加<script src="build/vendor.js" type="module"...
5. 我可以source/index.js在我的浏览器中重新加载，并且bar将可用。npm run build直到下次添加/删除依赖项时，我才需要运行。

我已经让 webpack 将依赖项拆分到一个单独的文件中，但是要import在无构建上下文中从该文件中分离出来，我必须import { bar } from './build/vendor.js. 那时 webpack 将不再 bundle bar，因为它不是相对导入。

我也尝试过Snowpack，它在概念上更接近我想要的，但我仍然无法配置它来实现上述工作流程。

我可以编写一个简单的脚本来将文件从 复制node_modules到build/，但我想使用捆绑软件来进行摇树等操作。不过，很难找到支持这种工作流程的东西。

我正在尝试postcss-simple-vars与Snowpack一起使用。

REPL：https ://github.com/frederikhors/snowpack-svelte-tailwindcss

我正在使用https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript

我正在尝试像这样使用它：

• postcss.config.js：

• index.js：

• 索引.css：

• 颜色.css：

但它找不到变量，为什么？

你能帮助我吗？

更新：

我阅读了所有https://github.com/snowpackjs/snowpack/discussions/1693并尝试了一切：我没有运气！

我无法将嵌套的 .css 导入@import为：

也不是：

因此，我无法使用postcss-simple-vars.

我们在使用我们的包结构运行 snowpack 时遇到问题。

我们的结构：

每个包都包含打字稿，并且都在app包中使用。

我得到错误Dependency Install Error: Package "@project/adapters/src/repositories/GradeFeedRepositoryImpl" not found. Have you installed it?

我需要如何配置 snowpack、webpack、babel... 来运行它？

我想为我的 Vue 3 应用程序使用Snowpack 。目前，我已经使用以下命令初始化了 Vue 3 应用程序：

默认情况下，Snowpack 会创建如下目录结构：

我需要稍微重组一下。我将现有应用程序移至 Snowpack 的原因。我的挑战是我需要转移到这样的结构：

简而言之：1）重命名src为pages和 2）向上移动index.js到与package.json. 当我进行此更改时，Snowpack 会抛出一条警告说“安装的目录不存在”。它打印出它正在寻找的文件，Snowpack 显然仍在src目录中查找。我的想法是审查snowpack.config.js文件。

我查看了文件中的mount属性。snowpack.config.js我mount.src.url改为/pages. 然而，这并没有奏效。我还尝试将属性更改为 just /，但也没有用。

我需要更改什么来告诉 Snowpack 查看当前目录而不是文件src目录index.js？

通常，我可以flip像这样在 svelte 中导入一个或其他动画：

但是，我不确定为什么在使用 svelte 的雪包中会出现以下错误：

我错过了什么吗？

我想在我package.json使用 Snowpack 的地方定义环境变量，但据我所知，Snowpack 会NODE_ENV根据dev vs build自动设置。

是否可以为 3 种模式而不是 2 种模式定义变量，我的意思是：

• 发展
• 预生产
• 生产

这些是我的脚本package.json：

但是， import.meta.env.MODE返回production2 种类型的构建。

我无法让它工作，也许还有另一种方法可以做到这一点。

我在雪包中有以下配置：

这是在我的声明文件中index.d.ts，但是当我启动开发服务器时，Snowpack 没有读取它。

让它工作的唯一方法是将文件名更改为index.ts

我正在尝试使用Snowpack导入与 glob 模式匹配的所有文件：

在 Rollup 中，您可以使用rollup-plugin-glob来实现它，在Snowpack生态系统中是否有类似的东西？

因为 Svelte 的未来不会使用 Sapper，所以我一直在搞乱新的 Svelte SSR 适配器。我正在尝试为 SSR 创建一个 firebase 函数，但我似乎找不到任何关于如何执行此操作的线索。

本指南告诉您如何实现 Svelte 以便它可以使用 Firebase 函数。我在那里没有问题，但我看不到如何设置 firebase 功能本身：

安装 Svelte@next

https://carlosvin.github.io/posts/svelte-next-bright-future-with-snowpack/en/

https://github.com/jthegedus/svelte-adapter-firebase

在我实际的index.js或index.ts firebase函数文件中，我不知道该调用什么。我在想这样的事情：

我相信我错过了这么简单的东西。有任何想法吗？

Sapper SSR 资源

• https://github.com/tristolliday/sapper-firebase-sample/blob/master/functions/index.js

• https://dev.to/eckhardtd/how-to-host-a-sapper-js-ssr-app-on-firebase-hmb

我正在尝试使我的 Svelte 应用程序国际化。

我正在使用 Svelte 和 Snowpack。和苗条的i18n。我在 GitHub 上关注他们的教程。

在教程中，他们说：

“注意：确保在应用程序的入口点调用 i18n.js 文件。如果您使用的是 Sapper，请记住还要在服务器端代码 (server.js) 上调用 init()。”

我不知道该怎么做？谁能帮帮我吗？

很感谢任何形式的帮助。