typescript - 构建 typescript 前端库

Question

我想做的是构建一个前端库(React 组件和 css/scss)。

我在找什么:

• 构建单个 commonjs .js 文件和 .css 文件。
• 不要在 .js 输出中包含库(例如:react 等)
• 允许我使用 (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，任何构建系统)？

Answer 1

你可以:

• 使用external 排除某些导入
• 使用rollup-plugin-sass生成一个 bundle.css。

关于 Rollup external 的更多信息 here

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