【问题标题】:Snowpack 找不到导入的模块
【发布时间】:2022-01-16 11:35:54
【问题描述】:

我正在使用 Preact 开发一个网站,我正在尝试将浏览器中发出的请求代理到我用作后端的开发服务器。

当我尝试使用 yarn client 运行前端应用程序时,它会出错并通知我尽管安装了 http2-Proxy 模块,但它找不到它。

我的目录结构如下:

Website_Root:
|   package.json
|                           
+---dummy-api
|                   
+---frontend
    |   package.json
    |   README.md
    |   snowpack.config.mjs
    |           
    +---public
    |       
    +---src
        |   index.jsx
        |   
        +---assets
        |       
        +---components
        |
        +---routes

我正在尝试使用 Yarn Workspaces 功能;因此,我在根级别的package.json 如下:

{
  "name": "Website",
  "packageManager": "yarn@3.1.1",
  "scripts": {
    "client": "yarn workspace frontend dev",
    "mockapi": "yarn workspace dummy-api dev",
    "dev": "yarn concurrently --kill-others-on-fail \"yarn client\" \"yarn mockapi\""
  },
  "workspaces": [
    "frontend",
    "dummy-api"
  ],
  "devDependencies": {
    "concurrently": "^6.4.0"
  },
  "dependencies": {
    "preact": "^10.6.4"
  }
}

frontend 工作空间内的package.json 如下:

{
  "name": "frontend",
  "private": true,
  "proxy": "http://localhost:9000/api",
  "scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build",
  },
  "dependencies": {
    "axios": "^0.24.0",
    "http2-proxy": "^5.0.53",
    "preact": "^10.6.4",
    "preact-router": "^3.2.1",
    "react-table": "^7.7.0"
  },
  "devDependencies": {
    "@prefresh/snowpack": "^3.0.0",
    "@snowpack/plugin-dotenv": "^2.1.0",
    "@snowpack/web-test-runner-plugin": "^0.2.2",
    "snowpack": "^3.8.8"
  }
}

最后,我的snowpack.config.js如下:

import proxy from "http2-proxy";

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  alias: {
    react: "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime",
  },
  mount: {
    public: { url: "/", static: true },
    src: { url: "/dist" },
  },
  plugins: ["@snowpack/plugin-dotenv", "@prefresh/snowpack"],
  routes: [
    {
      match: "all",
      src: "/api/.*",
      dest: (req, res) =>
        proxy.web(req, res, { hostname: "localhost", port: "9000" }),
    },
  ],
  devOptions: {
    open: "none",
  },
};

我不禁认为我设置错误; snowpack 应该能够找到http2-proxy,因为我已经安装了它,但我真的不明白什么是劫持。

我也尝试在根级别安装http2-proxy,但无济于事。

【问题讨论】:

    标签: reactjs node-modules yarnpkg preact snowpack


    【解决方案1】:

    我相信我发现了问题。

    我没有正确初始化纱线工作区。

    我尝试了preactsnowpack 的最小工作示例,发现创建父纱线目录,创建子目录,在父package.json 中注册它们,然后在每个运行@987654324 的子目录中@ 而不是 yarn init -2 产生了必要的结果。

    【讨论】: