reactjs - Rollup preserveModulesRoot không hoạt động như mong đợi

Tôi cảm thấy tùy chọn preserveModulesRoot khi sử dụng preserveModules không hoạt động như nó nên. Giả sử tôi có một src/index.ts và một loạt các tệp src/components/CompXYZ.tsx. Những gì tôi mong đợi sẽ xảy ra với preserve modules và root được đặt thành src là build của tôi trông như sau:

dist
-- index.js
-- index.map.js
-- index.d.ts
-- components
---- CompA.js
---- CompA.map.js
---- CompA.d.ts
---- CompB.js
---- CompB.map.js
---- CompB.d.ts

Nhưng những gì thực sự xảy ra là tiền tố src chỉ bị loại bỏ khỏi tệp input.ts và không tệp nào khác, do đó kết quả build cuối cùng trông như sau:

dist
-- index.js
-- index.map.js
-- index.d.ts
-- components
---- CompA.d.ts
---- CompB.d.ts
-- src
---- components
------ CompA.js
------ CompA.map.js
------ CompB.js
------ CompB.map.js

Vậy có vẻ như preserveModulesRoot chỉ ảnh hưởng đến các module được đề cập trong tùy chọn input, nhưng nếu tôi tự viết ra tất cả các module từng cái một, tôi có thể đặt chúng ở bất cứ đâu tôi muốn thay vì sử dụng preserveModulesRoot. Ý nghĩa của cài đặt này là gì nếu không phải để đặt root cho tất cả các module bổ sung được tạo ra khi preserveModules được bật?

Đây là rollup.config.js của tôi

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';

export default {
    input: 'src/index.ts',
    output: {
        dir: 'dist',
        format: 'esm',
        sourcemap: true,
        preserveModules: true,
        preserveModulesRoot: 'src',
    },
    plugins: [
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript(),
        postcss(),
        image(),
    ],
};

Câu trả lời #1

Tôi đã gặp vấn đề tương tự khi chuyển các script build của mình từ thư mục gốc của một monorepo sang một package bên trong nó. Tôi nghĩ vấn đề có thể do đoạn mã này: https://github.com/rollup/rollup/blob/5a5391971d695c808eed0c5d7d2c6ccb594fc689/src/Chunk.ts#L460-L464

Không có đường dẫn đầy đủ:

              preserveModules: true,
              preserveModulesRoot: `packages/${displayName}/src`

tạo ra một thư mục dist/ như sau:

Với đường dẫn đầy đủ mà chúng ta muốn xóa:

                preserveModules: true,
                preserveModulesRoot: path.join(process.env.PROJECT_CWD, `packages/${displayName}/src`)

tạo ra một thư mục dist/ như thế này (có vẻ giống hơn với những gì bạn đang mong đợi):

FYI: thuộc tính displayName đến từ file package.json của từng gói riêng lẻ.