Я создал библиотеку компонентов реакции, используя Vite.js. Вот вайт-конфиг:
// 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()]
//...
Но импорт терпит неудачу.
Спасибо
Как только вы узнаете, что это легко:
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
lib: {
entry: {
"single-select": resolve(
__dirname,
"src/components/single-select/index.js"
),
input: resolve(
__dirname,
"src/components/input/index.js"
),
},
name: "SharedUI",
formats: ["es"],
},
rollupOptions: {
plugins: [peerDepsExternal()],
output: {
globals: {
react: "React",
},
},
},
},
});
Вы также должны установить правильный exports
в package.json
.