node.js - npm 本地路径 - 是否可以从子文件夹导入？

Question

鉴于以下利用 local paths 的文件夹结构:

dist
  components
    Button.js
  index.js
src
  components
    Button.js
  index.js
website
  pages
    components
      button.js
  package.json
  ...
package.json

src/components/Button.js

export const VARIANTS = ["primary", "secondary"];

function Button({ variant = "primary"}) {
  ...
}

Button.propTypes = {
  variant: PropTypes.oneOf(VARIANTS),
};

export default Button;

src/index.js

export { default as Button } from "./components/Button";

网站/package.json

{
  "dependencies": {
    "design-system": "file:..",
    ...
  }
  ...
}

package.json

{
  "name": "design-system",
  "main": "dist/index.js",
  "scripts": {
    "transpile": "rimraf dist && babel src -d dist",
    ...
  },
  ...
}

导入Button工作正常:

website/pages/components/button.js

import { Button } from "design-system";

但是，直接从子文件夹导入不起作用:

website/pages/components/button.js

import { VARIANTS } from "design-system/components/Button";

This dependency was not found: design-system/components/Button

我在这里缺少什么？

Answer 1

当您从 design-system 导入时，如下所示:

import { Button } from "design-system";

因为您的 package.json 中有一个 "main": "dist/index.js" 字段，所以它与:

import { Button } from "design-system/dist/index.js";

这有效，因为文件存在。

要从 dist 文件夹导入任何其他模块，您必须具体并从 design-system/dist 开始:

import { VARIANTS } from "design-system/dist/components/Button";