webpack系统学习（十一）Typescript的打包配置

存在这样的.tsx文件：

//index.tsx
class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
    return _.join(["Hello",this.greeting],' ');
  }
}

let greeter = new Greeter("world");
alert(greeter.greet());

如果需要打包一个Typescript文件，webpack是无法处理以.tsx结尾的文件的，我们需要安装对应的loader来处理：

npm install typescript ts-loader -d

我们尝试打包，发现报错：

因为在使用ts-loader的时候，还需要一个配置文件tsconfig.json，此文件放置于项目一级目录下。

//tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist",//可以不写这一个配置
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

module和target表示我们的代码为{module}格式，需要转换成{target}格式；
allowJs表示我们可以在typescript中使用js的模块。

现在修改一下index.tsx:

import * as _ from 'lodash'

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return _.join(["Hello",this.greeting],' ');
  }
}

let greeter = new Greeter("world");
alert(greeter.greet());

在一般的js文件中，我们可以import _ from 'lodash'，但是这种写法在typescript中是不适用的，我们需要按照以上方式来写。同时，为了使typescript文件中的lodash模块也具有类型检测功能，我们可以安装对应的类型文件：

npm install @types/lodash -d

同理，如果我们使用了jquery，同时也希望jquery模块也具有类型检测功能，我们可以：

npm install @types/jquery -d

关于哪些模块具有其对应的类型文件，我们可以在typescript的官网上进行搜索