webpack - TypeScript配置

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。