标签: snowpack

我一直在浏览雪堆介绍，并对这个工具感到非常兴奋。不幸的是，在文档的最后，我在支持的库中找不到 Angular。然而，Snowpack 似乎非常灵活，所以我想知道是否有人尝试过将 Snowpack/Angular 设置放在一起。

我想react-admin在一个项目中使用，snowpack但遇到以下错误

? snowpack failed to load node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js
  'default' is not exported by node_modules/@sheerun/mutationobserver-shim/dist/mutationobserver.min.js, imported by node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js

我不确定这是一个错误react-admin还是它的依赖项之一，它可能可以通过更改配置来解决snowpack.config.json

繁殖步骤

使用Create Snowpack App初始化一个 Snowpack 项目

npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn

添加包 react-admin

yarn add `react-admin`

添加以下行 src/index.jsx

import { Admin } from 'react-admin'

运行命令以启动应用程序

npm start

会有一堆警告，如：

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

Conflicting namespaces: node_modules/ra-core/esm/i18n/index.js re-exports 'TranslationContext' from …

我在前端代码中使用私有 JavaScript 类方法，在开发工作流中使用Snowpack。

目前（从 v2.15.0-pre.5 开始），Snowpack 似乎不能很好地与私有类方法一起使用，即，以下在使用 构建时失败snowpack build：

export class TestClass {
  #test() {
    console.log("testing...");
  }

  test() {
    this.#test();
  }
}

复制的回购是here。克隆后，运行：

export class TestClass {
  #test() {
    console.log("testing...");
  }

  test() {
    this.#test();
  }
}

我已经打开了一个关于 Snowpack的问题，但显然问题在于与 Rollup 的集成，并且修复不是优先事项。

据我了解，要解决它，我们需要：

• Snowpack的自定义 Rollup 插件。
• 这样的插件应该acornInjectPlugins用来注入acorn-private-methods.

我想知道在我深入学习 Rollup 生态系统之前，是否有人可以帮助举个例子？

或者也许有另一种方法可以使它工作？

我现在重新使用_methodName而不是#methodName由于时间限制，但我计划在时间允许的情况下提供修复。

我有一个从空白模板开始的雪地项目。我的 index.js 文件从我正在开发的另一个模块中调用一个函数，我已经使用npm link.

当我更改另一个模块中的文件时，它不会在 snowpack 中更新。即使我重新启动开发服务器，它也不会更新。我必须用--reload清除缓存的参数重新启动snowpack 。

如何确保node_modules雪包识别对文件的更改以便重建它们？

背景

我正在尝试创建一个“无构建”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 将不再捆绑bar，因为它不是相对导入。

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

我可以编写一个简单的脚本来将文件从node_modulesto复制 …

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

import { flip } from "svelte/animate";

但是，我不确定为什么在 Snowpack with svelte 中出现以下错误：

Build Error: @snowpack/plugin-svelte
Error: Not implemented: Animation

Source
/Users/duane/Braid/ribbon/client/src/Posts/PostsPage.svelte
Error: Not implemented: Animation
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27126:28
    at Array.forEach (<anonymous>)
    at new InlineComponent$1 (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27087:26)
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27358:23
    at Array.map (<anonymous>)
    at map_children (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27353:22)
    at new IfBlock$1 (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27063:26)
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27358:23
    at Array.map (<anonymous>)
    at map_children (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27353:22)
    at new Fragment (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27410:26)
    at new Component (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27547:26)
    at Object.compile (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:28753:24)
    at Object.load (/Users/duane/Braid/ribbon/node_modules/@snowpack/plugin-svelte/plugin.js:120:31)
    at async runPipelineLoadStep (/Users/duane/Braid/ribbon/node_modules/snowpack/lib/index.js:74471:28)
    at async Object.buildFile (/Users/duane/Braid/ribbon/node_modules/snowpack/lib/index.js:74638:24)

我错过了什么吗？

我在为 Snowpack 项目设置 Jest 和 React 测试库时遇到问题，想知道你们中是否有人遇到过类似的情况。所以我收到的错误是The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'指向 。const { SNOWPACK_PUBLIC_BASE_URL } = import.meta.env;我已按照所有文档正确设置配置，但仍然收到此错误。我的配置文件如下。

package.json:

{
    "jest": {
        "verbose": true,
        "preset": "ts-jest",
        "testEnvironment": "node",
        "transform": {
            "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!variables/.*)"
        ],
        "moduleNameMapper": {
            "@app/(.*)": "<rootDir>/src/$1",
            "@auth/(.*)": "<rootDir>/src/auth/$1",
            "@hooks/(.*)": "<rootDir>/src/hooks/$1",
            "@gtm/(.*)": "<rootDir>/src/gtm/$1"
        }
    },
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build",
        "test": "jest __tests__/ --coverage",
        "test:watch": "jest --watch",
        "format": "prettier --write …

我开始玩 Snowpack。它采用与 Webpack 不同的方法，在安装后立即捆绑单个包。

“问题”是，当我安装一个包时，我必须首先运行npm install --save my-package，然后我必须用npx snowpack. 在积雪文档提到，我可以包括prepare脚本，将snowpack一切都运行后npm install，但这并不适用于单个包，只是一个普通的npm install在我所有的依赖关系package.json。据我所知，npm 文档中提到的所有 npm 钩子都是这种情况。

有什么办法可以在我安装单个软件包时自动运行脚本？我能想到的唯一方法是覆盖安装脚本并向其中添加一些内容。GitHub 或其他地方是否有任何此类示例？

更新：为了澄清起见，我想在npx snowpack每次安装新软件包时运行，--save但最好不带--save-dev或不带--save. 对于任何包，这永远不会有所不同。这将特定于某个回购/项目，而不是我系统上的全局。

这是不够的运行snowpack后，只需运行npm install，你会被钩住得到postinstall或release。此外，我想确保在我的项目上工作的开发人员可以npm install --save newdep像往常一样使用然后snowpack运行。我不想要求开发人员使用自定义命名脚本。

我正在尝试在另一个文件夹中编译 Svelte 组件，但即使在 snowpack.config.json 文件中使用别名，Snowpack 也找不到路径。

感谢您对获得此工作的任何帮助！！！

这是 snowpack.config.json 文件。

{
  "alias": {
    "components": "../../b5ui/src/components/b5ui"
  },
  "extends": "@snowpack/app-scripts-svelte",
  "plugins": [
    "@snowpack/plugin-webpack"
  ]
}

.svelte 文件中的导入

<script>
  import B5input from "components/B5input.svelte"
  import B5check from "components/B5check.svelte"
  import B5button from "components/B5button.svelte"
</script>

npm start 给出了这些错误...

[snowpack] [404] /_dist_/components/B5input.js
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.js
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.mjs
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.jsx
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.ts
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.tsx
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5input.svelte
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.js
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.mjs
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.jsx
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.ts
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.tsx
  ? C:\Dev2020\psllc\imenu-sp\src\components\B5input.svelte
[snowpack] [404] /_dist_/components/B5check.js
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5check.js
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5check.mjs
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5check.jsx
  ? C:\Dev2020\psllc\imenu-sp\public\_dist_\components\B5check.ts …

我们的团队开发了一堆 JavaScript 浏览器应用程序。这些应用程序共享功能（核心）和 Web 组件（共享）。文件夹结构为：

/apps
     /app-1
     /app-2
     ...
/core
/shared

每个文件夹包含一个src文件夹。

考虑在文件夹中使用 snowpackapp-1我想在开发（使用）和打包（使用）中/core/src或/shared/src两者中引用js文件snowflake devsnowflake build

1. 这可能吗？
2. 是否有最佳实践来实现这一目标？
3. 是否有这种情况的例子（或类似的情况）

我试过的：

步骤1：我用这样的路径：../../core/src/router.js。这不起作用，可能是因为资源在测试服务器 ( snowflake dev)的 webroot 之外。

第 2 步：我创建了两个符号链接：

apps/app-1/src/@core   -> ../../../core/src
apps/app-1/src/@shared -> ../../../shared/src

现在本地服务器找到了所有资源。然而，构建过程只找到了那些是core/src或 的直接子shared/src文件的文件，而不是子文件夹中的任何文件，例如shared/src/component/filter.js.

有什么想法或想法吗？

附录

该snowpack.config.jsonAPP-1：

/apps
     /app-1
     /app-2
     ...
/core
/shared

导入示例app-1/src/handler：

apps/app-1/src/@core   -> ../../../core/src
apps/app-1/src/@shared -> ../../../shared/src