我使用Vite.js构建了一个react组件库。下面是vite-config:
// vite.config.js
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
lib: {
entry: resolve(__dirname, "src/index.js"),
name: "SharedUI",
formats: ["es"],
fileName: "shared-ui",
},
rollupOptions: {
plugins: [peerDepsExternal()],
output: {
globals: {
react: "React",
},
},
},
},
});
下面是我的文件夹结构:
shared-ui/
├─ src/
| ├─ index.js
│ ├─ components/
│ │ ├─ index.js
│ │ ├─ select
| | | ├─index.js
| | | ├─select.component.jsx
│ │ ├─ input
| | | ├─index.js
| | | ├─input.component.jsx
├─ vite.config.js
├─ dist
shared-ui/src/index.js
-文件包含以下内容:
// shared-ui/src/index.js
export * from "./input";
export * from "./select";
vite build
命令创建了一个文件shared-ui.js
,位于dist
文件夹中。
如果我安装了这个包(在我的例子中,是在一个使用pnpm工作区的应用中),我可以使用以下命令导入Select
组件:
import { Select } from "shared-ui";
而且很有效。
但我想实现的导入像:
import { Select } from "shared-ui/select";
这怎么可能呢?我试过使用rollup-plugin-includepaths
// vite.config.js
import includePaths from "rollup-plugin-includepaths";
let includePathOptions = {
include: {},
paths: ["src/components"],
external: [],
extensions: [".js", ".jsx"],
};
//... vite rollupOptions->plugins-option
plugins: [includePaths(includePathOptions), peerDepsExternal()]
//...
但导入失败。
谢谢
1条答案
按热度按时间oxcyiej71#
一旦你知道这很容易: