sass - ساخت کتابخانه فرانتاند تایپاسکریپت

چیزی که من در تلاش برای انجام آن هستم ساخت یک کتابخانه فرانتاند (کامپوننتهای React و css/scss) است.

آنچه من به دنبال آن هستم:

• یک فایل مشترک commonjs با پسوند .js و یک فایل .css بسازید.
• کتابخانهها (مثلاً: react و غیره) را در خروجی .js وارد نکنید
• اجازه دهید از ماژولهای (s)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 مورد نظر (webpack، هر سیستم ساختی) وجود نداشته باشد؟

پاسخ شماره ۱

تو میتوانی:

• از external برای حذف برخی از واردات استفاده کنید
• از rollup-plugin-sass برای تولید bundle.css استفاده کنید.

اطلاعات بیشتر درباره external در Rollup اینجا

// 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(),
    ],
}