用typescript来写npm模块
还不知道typescript
是啥的前端童鞋需要做下功课了。
随着es6
的普及,越来越多的npm
模块都开始用es6
编写或者重构,看上去或者听起来都挺高大上的。
然而,模块调用者要使用这些模块,依然要去npm
仓库或者github
上仔细看该模块的api
,哪些方法该传什么类型的参数,返回什么类型的值都需要注意。
所以说,用es6
来写模块仅仅是写得爽了,用起来和之前并没什么不同。那如何做到写起来爽用得也爽呢,答案是typescript
。
用起来爽不爽,贴张gif感受一下。
mini-moment这个模块是我用typescript
写的,上面gif中可以看到,Moment
有哪些静态方法、实例有哪些属性和方法、方法都接收什么类型的参数、返回什么类型的值编辑器都给出了智能提示,不用去看api
了,也不用担心传错参数。这可不是用es6
写能做到的。
那智能提示是怎么做到的呢?
这都要归功于typescript
的头文件*.d.ts
,这个文件就像模块的名片,里面定义了模块的各种类/方法/属性等信息。目前主流的前端/Node.js的类库/框架都有对应的.d.ts
文件,可以去DefinitelyTyped上找一下。要使用的话可以通过tsd或者typings这两个工具安装(两个工具的作者是同一个人,目前tsd
已经废弃了,但是typings
没tsd
好用,经常出问题,typings
不行的时候我就会用tsd
)。
所以我们写的模块要想用的时候有智能提示,就要编写对应的.d.ts
文件,并把这个文件发布出去。目前有下面几种方法
-
添加到
DefinitelyTyped
仓库fork
DefinitelyTyped
这个github
仓库提交自己模块的
.d.ts
文件和对应的测试文件提交
pull request
到DefinitelyTyped
,等待作者merge
merge
后调用者就可以通过tsd
/typings
来安装使用
此方法可以解决模块依赖问题,但是周期太长,
DefinitelyTyped
作者可能不会及时merge
,也可能把你的pull request
打回来。 -
放在自己的
github
之类的仓库指定头文件路径,通过
tsd
/typings
来安装使用
此方法头文件由自己维护,不方便管理,但是用的时候要到处copy头文件路径。
-
随模块一起发布
编写头文件,命名为
index.d.ts
,放在项目根目录npm publish
的时候包含这个文件
此方法不需要用tsd
/typings
安装,npm install
模块的时候就有了,但是这种方法在依赖其他模块的时候就比较坑。
以上几种方法各有利弊,视情况选择。
说了头文件的编写,再说文件的打包,打包当然是webpack
了。
我们用typescript
开发的模块最终是要编译成javascript
的,但是typescript
在编译的时候有些坑爹,当编译的target
选项设置为es6
时只会将代码编译成es6
的语法,这样的代码在很多浏览器上是跑不起来的,而将target
设置为es5
或者es3
的时候又没法使用某些es6
的特性。很是蛋疼,不过还好,我们有babel
这个好基友,新特性照写,代码照跑。
所以我们的loader
可以这样写:
{
loaders: [
{ test: /\.ts?$/, loader: "babel?presets[]=es2015!ts" }
]
}
还没完,我们开发的模块编译后要兼容各种模块规范,用typescript
或者es6
的模块导入导出一般是用的import
和export
,一般是编译成commonjs
或者amd
规范,这样的代码不一定在所有环境都能跑起来。没关系,我们还有umd
,
所以我们的webpack.config.js
可以这样写:
"use strict";
const webpack = require('webpack');
const modName = "YOUR_MOD_NAME";
module.exports = {
entry: "./src/index.ts",
output: {
filename: `./dist/${modName}.js`,
library: modName,
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "babel?presets[]=es2015!ts" }
]
}
};
自从typescript
的生态越来越好后,我已再次入坑typescript
,目前已经用typescript
写了几个东西了,后续会再分享一些使用typescript
的经验。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。