Как да настроите сборен пакет за css модули в TypeScript

Успях да импортирам css модули в моя Typescript React Class с помощта на този плъгин от npm.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": [
    "node_modules/"
  ],
  "include": [
    "src/*"
  ]
}

Добавих и следния модулен файл в папката src/:

modules.d.ts

declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

Той потисна всички предупреждения и успях да тествам кода си добре. Имам компонент, който импортира css модул, разположен в същата папка:

- src
  - components
    - Text.tsx
    - Text.module.css

И така, моят компонент съдържа следния ред за импортиране:

import css from './Text.module.css';

Сега искам да транспилирам кода си в commonjs, за да го използвам като React модул в други кодове. Ето моята сборна конфигурация:

package.json

"scripts": {
  "build": "rollup -c && tsc",
  "test": "jest"
}

rollup.config.js

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';

export default [
    // CommonJS
    {
        inlineDynamicImports: true,
        input: './src/index.ts',
        output: [
            {
                file: pkg.main,
                format: 'cjs'
            }
        ],
        external: [
            ...Object.keys(pkg.dependencies || {})
        ],
        plugins: [
            babel({
                exclude: 'node_modules/**'
            }),
            typescript({
                typescript: require('typescript')
            }),
            postcss({
                plugins: [autoprefixer()],
                sourceMap: true,
                extract: true,
                minimize: true
            }),
            terser() // minifies generated bundles
        ]
    }
];

Мога да стартирам yarn build без никакви грешки, но когато погледна вградения код, файлът на css модула вече не се намира до файла Text.js. По-долу е екранна снимка на папките, генерирани от компилацията:

изграждане на дърво на папки

Целият css е преместен в папката lib и в генерирания файл Text.js:

Грешката във файла не може да бъде разрешена

Техният начин ли е или да запазят структурата на файловете, или да транспилират по начин, по който импортирането сочи към правилния css файл?

Видях някои заобиколни решения с webpack.config.js (изпълняващ eject скрипт), но не ми е много лесно с него (тъй като добавя много файлове и зависимости към проекта и не съм сигурен как да се справя добре с всичко ).

Благодаря много!


person KawaLo    schedule 13.05.2020    source източник


Отговори (1)


Няма значение, разбрах! Открих флаг за запазване на модули за сборния конфигурационен файл от тази публикация (с малка корекция от тази друга). Току-що редактирах моя rollup.config.js до това:

rollup.config.js

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';

export default [
    // CommonJS
    {
        preserveModules: true,
        input: './src/index.ts',
        output: [
            {
                dir: './build',
                format: 'cjs'
            }
        ],
        external: [
            ...Object.keys(pkg.dependencies || {})
        ],
        plugins: [
            babel({
                exclude: 'node_modules/**'
            }),
            typescript({
                typescript: require('typescript')
            }),
            postcss({
                plugins: [autoprefixer()],
                sourceMap: true,
                extract: true,
                minimize: true
            }),
            terser() // minifies generated bundles
        ]
    }
];

Сега работи перфектно!

person KawaLo    schedule 13.05.2020
comment
но как да получа един файл? - person Jeremy Chone; 06.09.2020
comment
спестяване за по-късно - person james emanon; 05.11.2020