У меня есть библиотека машинописных текстов, состоящая из нескольких папок. Каждая папка содержит файл index.ts, который экспортирует некоторую бизнес-логику. Я пытаюсь связать это с накопительным пакетом, чтобы добиться такого поведения на сайте вызова:
import { Button, ButtonProps } from 'my-lib/button'
import { Input, Textarea } from 'my-lib/input'
import { Row, Column } from 'my-lib/grid'
Это структура каталогов:
У меня есть основной index.ts под src/, который содержит:
export * from './button';
export * from './input';
export * from './grid';
В этом стиле я могу:
import { Button, Input, InputProps, Row, Column } from 'my-lib'
Но я не хочу этого. Я хочу получить доступ к каждому модулю по их пространствам имен. Если я удалю экспорт из файла index.ts, все, что я смогу сделать, это:
import { Button } from 'my-lib/dist/button'
чего я раньше не видел. Добавление dist/ к оператору импорта означает, что я обращаюсь к модулям через относительный путь. Я хочу my-lib/Button.
Я использую роллап. Я пытался использовать плагин alias, но это не сработало. Ниже приведена конфигурация моего накопительного пакета:
const customResolver = resolve({
extensions: ['ts'],
});
export default {
input: `src/index.ts`,
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
// plugins: [terser()],
},
{
file: pkg.module,
format: 'es',
sourcemap: true,
plugins: [terser()],
},
],
// Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
external: [],
watch: {
include: 'src/**',
},
plugins: [
// Allow json resolution
json(),
// Compile TypeScript files
typescript({ useTsconfigDeclarationDir: true }),
// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
commonjs(),
// Allow node_modules resolution, so you can use 'external' to control
// which external modules to include in the bundle
// https://github.com/rollup/rollup-plugin-node-resolve#usage
resolve(),
// Resolve source maps to the original source
sourceMaps(),
alias({
entries: [
{ find: 'my-lib/button', replacement: './dist/button' },
{ find: 'my-lib/input', replacement: './dist/input' },
{ find: 'my-lib/grid', replacement: './dist/grid' },
],
customResolver,
}),
],
};
А это файл tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "ES6",
"lib": ["ES2017", "ES7", "ES6", "DOM"],
"declaration": true,
"declarationDir": "dist",
"outDir": "dist",
"sourceMap": true,
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"allowJs": false,
"moduleResolution": "node",
"resolveJsonModule": true,
"baseUrl": "./src",
"paths": {
"my-lib/button": ["./src/button"],
"my-lib/input": ["./src/input"],
"my-lib/grid": ["./src/grid"]
}
},
"exclude": ["node_modules", "dist", "**/*.test.ts"],
"include": ["src/**/*.ts"]
}
Я не знаю, как добиться такой же структуры, как lodash/xxx или material-ui/yyy, с помощью свертки.
Люди предлагают псевдонимы или именованный экспорт, но я не мог заставить это работать.
Самый близкий к моей проблеме вопрос ниже:
Я хочу добиться того же, но с typescript и rollup.
Я думаю, что я что-то упускаю, спасибо.
