创建可重用的 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

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

看不见的层面：为什么用户访谈是不可替代的资产

扬帆起航：利用数据湖开发生产级 RAG 应用程序

如何将您的工作流程提高 10 倍：17 个必备应用程序

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

看不见的层面：为什么用户访谈是不可替代的资产

扬帆起航：利用数据湖开发生产级 RAG 应用程序

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps