使用 React、TypeScript 和 CSS 模块构建高效的 npm 包：综合指南

创建可重用的 npm 包可以使您的开发过程更加高效和愉快。在本文中，我们将指导您使用 React、TypeScript、CSS 模块和其他工具创建现代且强大的项目设置。

在我们开始之前，您可以在这里找到源代码： https://github.com/helgastogova/npm-react-typescript-template 。该存储库作为使用 React 和 TypeScript 创建 npm 包的基础。它预先配置了构建过程和一组针对现代开发工作流程的推荐包。

主要特点包括：

1. React & TypeScript ：现代 UI 开发，具有强大的类型安全性和卓越的开发人员体验。
2. CSS 模块：独立设计组件样式，避免 CSS 冲突，并实现模块化设计。
3. ESLint ：通过遵守 JavaScript 和 React 的最佳实践来确保代码质量。
4. Rollup ：有效地将 React 和 TypeScript 代码捆绑到单个文件中以便分发。
5. PostCSS ：利用下一代 CSS 功能并处理浏览器兼容性。
6. 大小限制：监控库的大小并防止意外的大小膨胀。

让我们更全面地深入了解每个工具。

CSS 模块

CSS 模块充当样式混乱领域的安全灯塔。他们为您的样式实施本地范围界定，避免冲突和重叠问题。每个 CSS 模块都会被“封装”到组件中，确保您定义的样式不会泄漏并无意中影响其他元素。

考虑一下我们使用 CSS 模块的这个简单组件：

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

及其关联的 CSS 模块：

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

在这种情况下， TestComponent.module.css中的.root类不会影响不同模块中的任何其他.root类。

ESLint

ESLint就像一座灯塔，引导您穿越汹涌的代码海洋。它有助于维护代码质量、捕获错误并在问题出现之前实施最佳编码实践。

在你的package.json中，你有：

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

使用npm run lint运行 linter。 ESLint 将扫描您的 TypeScript 文件并就任何潜在问题向您发出警告。这对于大型代码库特别方便，因为很容易出现小错误或不一致。

卷起

Rollup是您代码的私人健身教练。它将您的 JavaScript、TypeScript 和 CSS 打包到一个精简、高效的包中以供分发。

它轻量且快速，但真正的好处来自于它的“tree-shaking”能力。 Rollup 可以消除最终包中未使用的代码，使您的包尽可能精简。以下是汇总配置的示例：

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

后CSS

PostCSS就像一个时间旅行者，允许你使用未来的语法和功能来编写 CSS。然后它会回到过去（可以这么说），将这些现代样式转换为即使是较旧的浏览器也可以理解的代码。

您可以在上面的 Rollup 配置中看到 PostCSS 的运行情况。使用rollup-plugin-postcss ，您的现代 CSS 会被转换并包含在您的最终包中。这样做的好处是您可以使用最新功能编写 CSS，而不必担心浏览器兼容性。

尺寸限制

Size Limit是时刻警惕的看守人，确保您的库不会变得过于臃肿。它通过添加用户将下载的 JavaScript 和 CSS 来计算库的实际成本。它是一个很有价值的工具，可以帮助您控制捆绑包的大小。

在你的package.json中：

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

然后，您可以运行npm run size来检查包的大小。如果它超出您设置的限制（在本例中为 10 KB），脚本将抛出错误。这是确保您不会在不知不觉中增加用户下载时间的好方法。

设置

要开始使用此模板，请克隆存储库：

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

导航到目录：

 cd npm-react-typescript-template

安装依赖项：

 npm install

您已准备好开始开发您的软件包！入口点是src/index.tsx

构建包

创建自己的组件后，当您准备好构建要分发的包时，请运行：

 npm run build

您构建的包将位于dist目录中，准备发布到 npm。

发布到 npm

确保您已将package.json中的name字段设置为所需的包名称。另外，请记住在每次新发布之前更新版本号。完成后，使用以下命令登录 npm：

 npm login

输入您的用户名、密码和电子邮件。登录后，您可以通过以下方式发布您的包：

 npm publish

现在您已经在npmjs 库中发布了您的组件，人们可以开始使用它。你太棒了！

快乐编码！