4

webpack - TypeScript配置

TypeScirpt是微软开源的一款语言,它是javascript的超集,可以编译成javascript。 当构建大型项目的时候,使用ts可以极大的提高开发效率。

下面是使用构建工具webpack配置typescript的介绍。

typescript开发环境搭建

  • 通过npm init初始化一个项目, 使用npm install --save-dev typescript ts-loader安装ts和loader。

这里使用ts-loader搭配webpack3.0打包时出现了一个错误,原因是二者不匹配,将ts-loader退化为3.1.1解决了问题。

  • 配置webpack.config.js文件。
module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: {
        loader: 'ts-loader'
      }
    }
  ]
}
  • 配置tsconfig.json文件,

tsconfig.json文件是ts位于项目根目录下的配置文件,与babel的.babelrc类似。配置如下:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

tsconfig.json的配置选项有很多,更多细节可以参考 tsconfig.json配置

类库的类型声明

ts中变量有类型的,在我们配合使用其他js类库时,比如lodash,vue等。也可以使得这些类库中的一些函数等也具有类型判别。 当我们传入错误的类型时,可以针对性的提示类型错误信息。

只需要安装对应的声明文件。比如
'npm install --save @types/lodash'或者@types/vue等。

awesome-typescirpt-loader

除了官网提供的ts-loader外,也可以使用开发者开发的awesome-typescript-loader,二者的作用是相似的,可以使用这个loader代替ts-loader。查看更多关于这个loader的信息,访问

awesome-typescript-loader


charsandrew
201 声望32 粉丝

前端工程师,js开发者,对世界充满好奇,觉得自己永远是个小伙子。