创建可重用的 npm 包可以使您的开发过程更加高效和愉快。在本文中，我们将指导您使用 React、TypeScript、CSS 模块和其他工具创建现代且强大的项目设置。 在我们开始之前，您可以在这里找到源代码：  。该存储库作为使用 React 和 TypeScript 创建 npm 包的基础。它预先配置了构建过程和一组针对现代开发工作流程的推荐包。   https://github.com/helgastogova/npm-react-typescript-template 主要特点包括：    ：现代 UI 开发，具有强大的类型安全性和卓越的开发人员体验。 React & TypeScript   ：独立设计组件样式，避免 CSS 冲突，并实现模块化设计。 CSS 模块    ：通过遵守 JavaScript 和 React 的最佳实践来确保代码质量。 ESLint    ：有效地将 React 和 TypeScript 代码捆绑到单个文件中以便分发。 Rollup    ：利用下一代 CSS 功能并处理浏览器兼容性。 PostCSS ：监控库的大小并防止意外的大小膨胀。 大小限制 让我们更全面地深入了解每个工具。   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}'" } 使用 运行 linter。 ESLint 将扫描您的 TypeScript 文件并就任何潜在问题向您发出警告。这对于大型代码库特别方便，因为很容易出现小错误或不一致。 npm run lint 卷起 是您代码的私人健身教练。它将您的 JavaScript、TypeScript 和 CSS 打包到一个精简、高效的包中以供分发。 Rollup 它轻量且快速，但真正的好处来自于它的“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   就像一个时间旅行者，允许你使用未来的语法和功能来编写 CSS。然后它会回到过去（可以这么说），将这些现代样式转换为即使是较旧的浏览器也可以理解的代码。 PostCSS 您可以在上面的 Rollup 配置中看到 PostCSS 的运行情况。使用  ，您的现代 CSS 会被转换并包含在您的最终包中。这样做的好处是您可以使用最新功能编写 CSS，而不必担心浏览器兼容性。 rollup-plugin-postcss 尺寸限制 是时刻警惕的看守人，确保您的库不会变得过于臃肿。它通过添加用户将下载的 JavaScript 和 CSS 来计算库的实际成本。它是一个很有价值的工具，可以帮助您控制捆绑包的大小。 Size Limit 在你的 中： package.json   "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] 然后，您可以运行 来检查包的大小。如果它超出您设置的限制（在本例中为 10 KB），脚本将抛出错误。这是确保您不会在不知不觉中增加用户下载时间的好方法。 npm run size 设置 要开始使用此模板，请克隆存储库：   git clone https://github.com/helgastogova/npm-react-typescript-template.git 导航到目录：   cd npm-react-typescript-template 安装依赖项：   npm install 您已准备好开始开发您的软件包！入口点是 src/index.tsx 构建包 创建自己的组件后，当您准备好构建要分发的包时，请运行：   npm run build 您构建的包将位于 目录中，准备发布到 npm。 dist 发布到 npm 确保您已将 中的 字段设置为所需的包名称。另外，请记住在每次新发布之前更新版本号。完成后，使用以下命令登录 npm： package.json name   npm login 输入您的用户名、密码和电子邮件。登录后，您可以通过以下方式发布您的包：   npm publish 现在您已经在 中发布了您的组件，人们可以开始使用它。你太棒了！ npmjs 库 快乐编码！

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

Claude Sonnet 3.5 系统提示泄漏：法医分析

从论坛到信息流：社交媒体算法如何塑造数字互动

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

Claude Sonnet 3.5 系统提示泄漏：法医分析

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps