Webpack + CSS 模块 + TS = ❤️
Webpack + CSS 模块 + TS = ❤️
我认为 CSS Modules 是一个不朽的项目。它有助于解决 CSS 最严重的问题之一——类名冲突。这是一个快速示例，展示了 CSS 模块的所有功能。
假设您有一个组件 Button。使用纯 CSS 是危险的，因为我们有可能有人使用相同的 css 选择器：
Good old CSS
Your design gonna destroy, if someone else uses the same class name
CSS Modules 非常简单地解决了这个问题。它散列文件中的所有类名并将它们导出为映射：
CSS Modules allows you to work with CSS files as with plain JS objects
In JSX you have access to class names from Button.css
如果你使用 Webpack，你可以启用 CSS Modules，几乎不接触配置：
webpack.config.js
问题
如果您在项目中使用 TypeScript（我希望您这样做），您可能会感到使用 CSS 模块的痛苦，因为 TS 不知道如何处理它们。最简单的解决方案如下所示：
src/globals.d.ts
容易，对吧？但现在我们还有另一个问题。如果您尝试访问不存在的类名，TS 不会警告您：
TS: “No problem bro, I am sure that class name azaza exists”
我认为没有必要向你解释为什么我们都应该避免这种情况。
社区的力量
幸运的是，社区已经解决了这个问题： 打字稿插件CSS模块 .这个插件创建虚拟 .d.ts 每个 CSS 模块的文件，因此有助于 IDE 查找错误：
tsconfig.json
If you turn on TypeScript in your IDE, it will warn you about possible bugs
但是如果你从 CLI 运行 TypeScript，编译器不会说什么。发生这种情况是因为 TypeScript 实际上 不支持这些插件 .所以我们还有一个问题： 有错误的代码将编译 .
让我们编码
在我们开始解决问题之前，我建议你回顾一些 JS 基础知识。我要谈谈 ES 模块。该标准提供了两种不同类型的导出（和导入）：命名和默认。在我的项目中，我更喜欢命名导出，因为我认为它们有助于提供更可靠的代码。这里有两个例子：
Named exports VS default export
它们是相似的，但同时有一个重要的区别。如果您使用命名导出，如果您尝试导入未导出的内容，Webpack 等工具将引发错误：
Build time error
默认导出的工作方式不同。例如，如果您将对象导出为默认值，并且尝试访问不存在的属性，则捆绑程序不会说任何内容：
回到我们的问题
因此，据我了解，我们需要使用命名导出而不是默认导出 CSS 类名称。此更改将帮助我们在构建期间捕获错误。如果你使用 Webpack，你需要做的就是添加 命名出口 您的选择 CSS加载器 配置：
webpack.config.js
现在，如果您尝试构建此代码：
Button.css doesn’t have default export
你会得到一个错误，因为你正在尝试导入默认导出，它不再存在。访问不存在的类名也会破坏构建：
Button.css doesn’t export azaza
导入样式的最正确方法现在如下所示：
好的。现在我们对我们的代码充满信心。如果我们引用不存在的类名，它将不会到达 prod。我喜欢这个解决方案，因为它甚至适用于不使用 TS 的项目。
最后一件事情
我们的 TS 插件仍然认为默认导出存在。这不好，因为 IDE 不会警告我们可能出现的错误。构建会失败，但我们不想每次进行一些更改时都构建我们的项目，对吧？我们希望从我们的 IDE 中获得即时反馈。
文档 说插件总是提供默认导出。伤心。但是有可能改变这种行为。选项 自定义模板 会帮助我们。它允许生成我们自己的类型化。我们需要做的就是创建一个函数，该函数接受类哈希映射作为参数并将类型化作为字符串返回：
customTemplate.js
tsconfig.json
看起来更好。现在 IDE 和 Webpack 的工作方式相同。
结论
Webpack、TypeScript 和 CSS 模块允许我们编写独立的强类型样式。我希望这篇文章能帮助您提高代码库的可靠性。谢谢阅读 ：）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
