TypeScript 详解之构建发布一个 TypeScript NPM 包

介绍

在这篇文章中，我们会使用 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 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

Formatting & Linting

移除不必要文件