构建打字稿前端库答案

【问题标题】：Building typescript frontend library构建打字稿前端库
【发布时间】：2019-01-08 21:33:07
【问题描述】：

我想做的是构建一个前端库（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，任何构建系统）？

【问题讨论】：

标签： typescript sass rollupjs css-modules

【解决方案1】：

你可以：

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

更多关于汇总externalhere

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

【讨论】：