给定以下利用本地路径的文件夹结构:
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
我在这里想念什么?
当您从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";
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句