@100mslive/hms-faceapi 中文文档教程
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 matrixsize
which comments cost comparison of your library on every pull request usingsize-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。
TSDX User Guide
Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use
ts-node-dev
, plaints-node
, or simpletsc
.If you’re new to TypeScript, checkout this handy cheatsheet
Commands
TSDX scaffolds your new library inside /src
.
To run TSDX, use:
npm start # or yarn start
This builds to /dist
and runs the project in watch mode so any edits you save inside src
causes a rebuild to /dist
.
To do a one-off build, use npm run build
or yarn build
.
To run tests, use npm test
or yarn test
.
Configuration
Code quality is set up for you with prettier
, husky
, and lint-staged
. Adjust the respective fields in package.json
accordingly.
Jest
Jest tests are set up to run with npm test
or yarn test
.
Bundle Analysis
size-limit
is set up to calculate the real cost of your library with npm run size
and visualize the bundle with npm run analyze
.
Setup Files
This is the folder structure we set up for you:
/src
index.tsx # EDIT THIS
/test
blah.test.tsx # EDIT THIS
.gitignore
package.json
README.md # EDIT THIS
tsconfig.json
Rollup
TSDX uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.
TypeScript
tsconfig.json
is set up to interpret dom
and esnext
types, as well as react
for jsx
. Adjust according to your needs.
Continuous Integration
GitHub Actions
Two actions are added by default:
main
which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrixsize
which comments cost comparison of your library on every pull request usingsize-limit
Optimizations
Please see the main tsdx
optimizations docs. In particular, know that you can take advantage of development-only optimizations:
// ./types/index.d.ts
declare var __DEV__: boolean;
// inside your code...
if (__DEV__) {
console.log('foo');
}
You can also choose to install and use invariant and warning functions.
Module Formats
CJS, ESModules, and UMD module formats are supported.
The appropriate paths are configured in package.json
and dist/index.js
accordingly. Please report if any issues are found.
Named Exports
Per Palmer Group guidelines, always use named exports. Code split inside your React app instead of your React library.
Including Styles
There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
For vanilla CSS, you can include it at the root directory and add it to the files
section in your package.json
, so that it can be imported separately by your users and run through their bundler's loader.
Publishing to NPM
We recommend using np.