Создание библиотеки внешнего вида машинописи - PullRequest
0 голосов
/ 13 декабря 2018

Я пытаюсь создать библиотеку веб-интерфейса (компоненты React и css / scss).

Что я ищу:

  • Создание одного файла commonjs .js и .css файла.
  • НЕ включаетбиблиотеки (например, реагировать и т. д.) в выводе .js
  • Позвольте мне использовать модули CSS

Мой код выглядит следующим образом:

MyComponent.tsx

import { myComponentStyle } from './MyComponent.scss'

export class MyComponent extends React.Component {
  render() {
    return <div className={myComponentStyle} />
  }
}

MyComponent.scss

.myComponentStyle { /* styles */ }

MyComponent.scss.d.ts (Сгенерировано typed-css-modules для радости компилятора ts)

export const myComponentStyle: string;

И у меня есть один файл index.ts, который экспортирует эти файлы:

index.ts

export { MyComponent } from './MyComponent.tsx'
// other components

Если у меня нет стилей, то подобная конфигурация свертки строит именно так, как я хочу:

import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'

const pkg = require('./package.json')

export default {
  input: 'src/index.ts',
  output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
  external: [],
  plugins: [
    typescript({ useTsconfigDeclarationDir: true }),
    commonjs(),
  ],
}

Но я не могу понять, как с этим справитьсяCSSЯ пробовал rollup-plugin-postcss и rollup-plugin-postcss-modules, но ни один из них даже не компилируется.

Мой вопрос:

  • Есть ли способ (пример) о том, какустановить это с помощью свертки?
  • Если нет альтернативы для получения желаемых одиночных .js и .css выходов (веб-пакет, какая бы то ни было система сборки)?

1 Ответ

0 голосов
/ 08 января 2019

Вы можете:

  • использовать external для исключения определенных импортов
  • использовать rollup-plugin-sass для генерации bundle.css.

Подробнее о Rollup external здесь

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import sass from 'rollup-plugin-sass'

const pkg = require('./package.json')

export default {
    input: 'src/index.ts',
    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
    external: Object.keys(pkg.dependencies), // OR specify an array: ['react' /* , ...etc */]
    plugins: [
        sass({
            output: 'dist/bundle.css'
        }),
        typescript({ useTsconfigDeclarationDir: true }),
        commonjs(),
    ],
}
...