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";

website / package.json

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

package.json

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

导入Button可以正常工作：

网站/页面/组件/button.js

import { Button } from "design-system";

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

网站/页面/组件/button.js

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

未找到此依赖项：design-system / components / Button

我在这里想念什么？

Answer 1

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

import { Button } from "design-system";

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

相同

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

因为文件存在而起作用。

要从dist文件夹导入任何其他模块，您必须明确并以design-system/dist开头：

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

Answer 2

它应该可以按预期正常工作-我的猜测是，更新代码后您可能没有重新安装模块吗？由于本地模块已复制到node_module文件夹中，因此每次修改模块代码时都需要更新node_modules副本。在您的项目根目录中尝试以下操作：

rm -rf node_modules/design-system && npm install

，然后检查其是否正常工作。

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

2 个答案: