TypeScript 详解之构建发布一个 TypeScript
2022-03-09 本文已影响0人
you的日常
介绍
在这篇文章中，我们会使用 TypeScript, TSLint, Prettier, Jest 等构建并发布一个 NPM TypeScript 包。
前提
- 下载 Node.js 和 NPM。
node -v
npm -v
- 选一个好的包名。包名必须是 pascal-case 并且全部小写。因为 NPM 上有 700k+ 的包，所以你需要在构建之前先去 www.npmjs.com/ 查询你的包名有没有被使用。在本文中，我取了 irene-awesome-gretter。
基本构建
- 选择一个合适的名字创建包文件夹。
mkdir irene-awesome-greeter && cd irene-awesome-greeter
- 新建
.gitignore文件并写入 node_modules，新建README文件。
echo "node_modules" >> .gitignore
echo "# Irene Awesome Greeter" >> README.md
- Git 初始化包并关联远程仓库。下面 Git Repository Url 是远程仓库的 Url。
git init
git add . && git commit -m "Initial commit"
git remote add origin <Git Repository Url>
git push -u origin master
- NPM 初始化包，后续我们会修改生成的
package.json。 至此，生成的目录结构如下：
image.png
npm init -y
添加 TypeScript as devDependencies
- 下载 TypeScript。 下载完后，在根目录下多了
node_modules文件夹和package-lock.json文件。
npm i -D typescript
- 为了编译
TypeScript，我们需要一个配置文件，在根目录下新建tsconfig.json，内容如下。⚠️注意我（译者）在原文配置的基础上添加了 lib，指定了 es6。 下面解释下配置文件字段：注意 ES6 = ES2015
image.png
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./lib",
"strict": true，
"lib": ["es6"]
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]
}
- target：编译之后生成的
JavaScript文件需要遵循的标准，可选值："ES3"（默认），"ES5"，"ES6"/"ES2015"，"ES2016"，"ES2017" 或 "ESNext"。我们选择了es5为了使包具有更好的浏览器兼容性。 - module：指定生成哪个模块系统代码，默认值：
target === "ES3" or "ES5" ? "CommonJS" : "ES6"。 - declaration：是否生成对应的声明文件，默认值：false。在构建包时，应该设置为 true，这样
TypeScript会将生成的声明文件和对应编译后的JavaScript代码一起导出，以便包可以在TypeScript和JavaScript项目中同时使用。本项目中生成的声明文件是 /lib/index.d.ts。 - outDir：指定输出目录。编译后的
JavaScript代码会在与tsconfig.json同级的 lib 文件夹中。 - strict：是否启用所有严格类型检查选项，默认值：false。
- lib：编译需要的库文件，例如你指定的 target 是
ES5，但是在代码中使用了ES6特性，就需要在 lib 中加上 ES6。默认值：如果 lib 没有指定默认注入的库的列表，默认注入的库为： - target ES5：DOM，ES5，ScriptHost。
- target ES6：DOM，ES6，DOM.Iterable，ScriptHost。
- include：指定要编译的目录。
- exclude：指定不编译的目录。
node_modules和__tests__只是在开发阶段使用，构建阶段无需编译。
更多的编译选项可参考： www.typescriptlang.org/docs/handbo…
- 创建
src文件夹，在其下新建一个 index.ts，内容如下：
export const Greeter = (name: string) => `Hello ${name}`;
- 在
package.json中添加 build script。 在控制台运行npm run build，你会看到生成了一个新的 lib 文件夹，里面是编译后的 js 代码和声明文件。
image.png
"build": "tsc"
- 除了
package-lock.json以外， 我们一般都不希望提交自动生成的文件到 Git 上去，因为只要改变了源文件，每次 build 的时候它们都不同，就会造成很多冲突，所以我们把 lib 文件夹放到.gitignore中。
node_modules
/lib
