如何创建 Typescript 和 React 模块
介绍
通过大量推广代码重用和模块化设计理念，JavaScript 生态系统从 NPM 中受益匪浅。创建一个新的 JavaScript 模块并分发它就像创建一个package.json文件、指向 JavaScript 模块并运行npm publish一样简单。在处理 Typescript 和 React 时，这个过程稍微复杂一些，这就是我们将在本指南中讨论的内容。为了使其更有趣，我们将添加对测试组件和设置舒适的开发工作流程的支持。
普通 JavaScript 模块
让我们首先通过在干净的文件夹中调用npm init并按照提示来完成普通 Javascript NPM 模块的设置：
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test-module)
version: (1.0.0)
description: My Module!
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to package.json:
{
"name": "test-module",
"version": "1.0.0",
"description": "My Module!",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
现在，让我们创建模块文件（其名称在package.json的主要部分中指定）：
module.export = {
testMethod: function(param) {
return "Hello " + param;
}
};
这里我们声明了一个模块，它导出（即可供外部使用）一个名为testMethod的函数。
为了测试 NPM 打包是否正常工作，我们运行npm pack并检查生成的test-module-1.0.0.tgz档案。
我们完成了！（其实不然，因为我们没有提供测试，也没有实际执行 npm publish）
添加 Typescript
Typescript 是Javascript 语言超集的转译器。由于我们现在要用一种不同于 Javascript 的语言编写代码，因此我们需要设置将代码从 Typescript 转换为 Javascript 的构建步骤。
项目设置
通过运行以下命令在你的项目中安装 Typescript：
$ npm i -D typescript
接下来，我们将通过创建配置文件tsconfig.json来设置 Typescript ：
{
"compilerOptions": {
"outDir": "build",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["src"],
"exclude": ["node_modules", "build"]
}
我们在这里配置一些重要的参数：
- outDir——放置生成的.js文件的位置。
- target - 目标 ECMAScript 版本。由于 Typescript 是 Javascript 的超集，因此它包含并非所有浏览器供应商都支持的功能/语法。我们指定编译目标以保持语法兼容性。
- sourceMap - 在转译时，Typescript 可以生成一个源映射，以便在创建的 JS 文件上调试期间访问原始 Typescript 代码。
- 声明- Typescript 生态系统是围绕.d.ts（即所谓的类型定义）构建的。添加此标志将为您生成.d.ts文件，并在其中包含所有导出的类型和函数。
- include - 在哪里寻找 .ts 文件（src）。
- 排除- 要避免的文件夹（node_modules） - 因为我们不想转换现有的模块并构建我们的输出文件夹。
代码更改
首先，我们先正确组织一下文件夹，创建一个名为src的子文件夹（Typescript 编译器的输入，如tsconfig.json包含部分中所述），然后将index.js移到那里，并将其重命名为index.ts。
接下来，让我们修复由于tsconfig.json文件中的严格性选项而发生的语法错误，以便index.ts看起来像这样：
export function testMethod(param: string) {
return "Hello " + param;
}
最后，让我们通过编辑package.json并添加构建脚本来添加一个构建步骤来执行Typescript编译器：
"scripts": {
"build": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
让我们尝试一下：
$ npm run build
您应该看到一个名为build 的新文件夹，其中包含三个文件：
- index.js - 编译输出。
- index.js.map——源地图。
- index.d.ts - 类型定义。由于我们导出了一个函数，因此它将被包含在此处。
测试
$ npm i -D ts-jest jest @types/jest
然后，编辑package.json以通过添加以下内容激活 Jest 的 Typescript 支持：
"jest": {
"preset": "ts-jest",
"testEnvironment": "node"
}
并替换
"test": "echo \"Error: no test specified\" && exit 1"
和
"test": "jest"
现在，让我们在src/__tests__中创建一个名为function.spec.ts的测试文件：
import { testMethod } from "..";
test("create a new hello", () => {
expect(testMethod("World")).toBe("Hello World");
});
在这里，我们导入testMethod<font style="vertical-align: inheri
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~