如何发布包含 CSS 模块的基于 TypeScript 的 npm 模块？答案

【问题标题】：How to publish a TypeScript based npm module that contains CSS modules?如何发布包含 CSS 模块的基于 TypeScript 的 npm 模块？
【发布时间】：2021-06-09 04:20:29
【问题描述】：

我正在为共享反应组件开发一个基于 TypeScript 的内部库。构建过程只是tsc，然后发布到内部 npm 注册表。不需要复杂的 Babel 编译过程，因为构建工件仅在团队内部使用，并且当消费应用程序运行其 Webpack 捆绑过程时，会在此库上运行适当的转译。

当我尝试将单个 styles.css 文件拆分为正确拆分的 CSS modules 时，问题开始出现。要使用 CSS 模块，我的 React 组件文件中会有如下代码语法。例如在FooComponent.tsx,

import 'FooComponent.css';

TypeScript 编译器不完全理解它，因此它只会将相同的导入语句放入已编译的 FooComponent.js 文件中。现在的问题是我应该如何捆绑和分发这些单独的 CSS 模块？我知道 Webpack 有像 MiniCssExtractPlugin 这样的插件来处理 CSS 模块，一旦它们被正确加载。但我正在考虑在我的设置中分发这些 CSS 模块的最佳方式是什么。

由于消费应用程序已在 Webpack 上进行了完整设置以正确加载和捆绑 JS/CSS 资产，我能想到的最简单的解决方案是将这些 CSS 模块相应地附加到存储 TypeScript 编译结果的 dist 文件夹中, 以确保 CSS 文件上的那些 import 语句不会最终进入未找到的资源。如果我在构建过程中以其他方式捆绑 CSS 模块，则需要删除或特殊处理这些导入语句，就像 gulp-csslit 将 CSS 文件转换为 JS 文件所做的那样。

我还没有对此进行过任何实验，但如果有人能提供一些启发，我想知道最佳实践。

【问题讨论】：

标签： typescript npm webpack css-modules

【解决方案1】：

由于消费应用程序自己处理和捆绑 CSS 资产，我发现最简单的方法是将 CSS 模块放入 dist 文件夹中。为此，我使用CopyWebpackPlugin。

【讨论】：