用typescript来写npm模块

用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文件，并把这个文件发布出去。目前有下面几种方法

1. 添加到DefinitelyTyped仓库

   • fork DefinitelyTyped这个github仓库

   • 提交本身模块的.d.ts文件和对应的测试文件

   • 提交pull request到DefinitelyTyped,等待做者merge

   • merge后调用者就能够经过tsd/typings来安装使用

   此方法能够解决模块依赖问题，可是周期太长，DefinitelyTyped做者可能不会及时merge，也可能把你的pull request打回来。

2. 放在本身的github之类的仓库

   • 指定头文件路径，经过tsd/typings来安装使用

   此方法头文件由本身维护，不方便管理，可是用的时候要处处copy头文件路径。

3. 随模块一块儿发布

   • 编写头文件，命名为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的经验。