介绍
在这篇文章中,我们会使用 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
。 至此,生成的目录结构如下:
npm init -y
添加 TypeScript as devDependencies
- 下载 TypeScript。 下载完后,在根目录下多了
node_modules
文件夹和package-lock.json
文件。
npm i -D typescript
- 为了编译
TypeScript
,我们需要一个配置文件,在根目录下新建tsconfig.json
,内容如下。⚠️注意我(译者)在原文配置的基础上添加了 lib,指定了 es6。 下面解释下配置文件字段:注意 ES6 = ES2015
{
"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 代码和声明文件。
"build": "tsc"
- 除了
package-lock.json
以外, 我们一般都不希望提交自动生成的文件到 Git 上去,因为只要改变了源文件,每次 build 的时候它们都不同,就会造成很多冲突,所以我们把 lib 文件夹放到.gitignore
中。
node_modules
/lib