@100mslive/100ms-web-sdk 中文文档教程

Question

TSDX User Guide

恭喜！ 通过使用 TSDX 引导这个项目，你刚刚节省了自己的工作时间。 让我们为您介绍这里的内容以及如何使用它。

此 TSDX 设置用于开发可以发布到 NPM 的库（不是应用程序！）。 如果您想要构建一个 Node 应用程序，您可以使用 ts-node-dev、普通 ts-node 或简单的 tsc。

如果您是 TypeScript 的新手，请查看这个方便的备忘单

Commands

TSDX 在 /src 中构建您的新库。

要运行 TSDX，请使用：

npm start # or yarn start

这构建到 /dist 并以监视模式运行项目，因此您在 src 中保存的任何编辑都会导致重建到 /dist。

要进行一次性构建，请使用 npm run build 或 yarn build。

要运行测试，请使用 npm test 或 yarn test。

Configuration

使用 prettier、husky 和 lint-staged 为您设置代码质量。 相应地调整 package.json 中的各个字段。

Jest

Jest 测试设置为使用 npm test 或 yarn test 运行。

Bundle Analysis

size-limit 设置为使用 npm 计算您的库的实际成本运行大小 并使用 npm run analyze 可视化包。

Setup Files

这是我们为您设置的文件夹结构：

/src
  index.tsx       # EDIT THIS
/test
  blah.test.tsx   # EDIT THIS
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json

Rollup

TSDX 使用 Rollup 作为捆绑器，并为各种模块格式和构建设置生成多个汇总配置。 有关详细信息，请参阅优化。

TypeScript

tsconfig.json 被设置为解释 dom 和 esnext 类型，以及 react for jsx 。 根据您的需要进行调整。

Continuous Integration

GitHub Actions

默认添加两个操作：

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit

Optimizations

请参阅主要的 tsdx 优化文档。 尤其要知道您可以利用仅限开发的优化：

// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}

您还可以选择安装和使用 invariant 和 < href="https://github.com/palmerhq/tsdx#warning">警告功能。

Module Formats

支持 CJS、ESModules 和 UMD 模块格式。

相应的路径在 package.json 和 dist/index.js 中配置。 如果发现任何问题，请报告。

Named Exports

根据 Palmer Group 指南，始终使用命名导出。代码在您的 React 应用而不是 React 库中拆分。

Including Styles

发布样式的方法有很多，包括使用 CSS-in-JS。 TSDX对此没有意见，自己喜欢怎么配置。

对于 vanilla CSS，您可以将其包含在根目录并将其添加到您的 package.json 中的 files 部分，以便您的用户可以单独导入它并运行他们的捆绑程序的加载程序。

Publishing to NPM

我们推荐使用 np。