Webpack TypeScript

TypeScript 是 JavaScript 的超集，為其增加了類型系統(tǒng)，可以編譯為普通 JavaScript 代碼。這篇指南里我們將會學(xué)習(xí)是如何將 webpack 和 TypeScript 進(jìn)行集成。

基礎(chǔ)配置

首先，執(zhí)行以下命令安裝 TypeScript compiler 和 loader：

npm install --save-dev typescript ts-loader

現(xiàn)在，我們將修改目錄結(jié)構(gòu)和配置文件：

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- tsconfig.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- index.js
+   |- index.ts
  |- /node_modules

tsconfig.json

這里我們設(shè)置一個基本的配置來支持 JSX，并將 TypeScript 編譯到 ES5……

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

查看 TypeScript 官方文檔 了解更多關(guān)于 tsconfig.json 的配置選項。

想要了解 webpack 配置的更多信息，請查看 配置 概念。

現(xiàn)在，配置 webpack 處理 TypeScript：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

這會讓 webpack 直接從 ./index.ts 進(jìn)入，然后通過 ts-loader 加載所有的 .ts 和 .tsx 文件，并且在當(dāng)前目錄輸出一個 bundle.js 文件。

現(xiàn)在讓我們改變 lodash 在 ./index.ts 文件中的引入， 因為在 lodash 的定義中沒有默認(rèn)(default)的導(dǎo)出。

./index.ts

- import _ from 'lodash';
+ import * as _ from 'lodash';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

Loader

ts-loader

在本指南中，我們使用 ts-loader，因為它能夠很方便地啟用額外的 webpack 功能，例如將其他 web 資源導(dǎo)入到項目中。

請注意，如果您已經(jīng)在使用? babel-loader? 來轉(zhuǎn)譯您的代碼，您可以使用? @babel/preset-typescript? 來讓Babel處理您的JavaScript和TypeScript文件，而無需使用額外的加載器。請記住，與ts-loader相反，底層的 @babel/plugin-transform-typescript? 插件不會執(zhí)行任何類型檢查。

Source Maps

想要了解 source map 的更多信息，請查看 開發(fā) 指南。

想要啟用 source map，我們必須配置 TypeScript，以將內(nèi)聯(lián)的 source map 輸出到編譯后的 JavaScript 文件中。必須在 TypeScript 配置中添加下面這行：

tsconfig.json

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node",
    }
  }

現(xiàn)在，我們需要告訴 webpack 提取這些 source map，并內(nèi)聯(lián)到最終的 bundle 中。

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.ts',
+   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

查看 devtool 文檔以了解更多信息。

Client types

你可以在 TypeScript 代碼中使用 webpack 特定的特性，比如 import.meta.webpack。并且 webpack 也會為它們提供類型支持，只需要添加一個 TypeScript reference 聲明：

/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 沒有上面的聲明的話，TypeScript 會拋出一個錯誤

使用第三方類庫

在從 npm 安裝 third party library(第三方庫) 時，一定要記得同時安裝此 library 的類型聲明文件(typing definition)。你可以從 TypeSearch 中找到并安裝這些第三方庫的類型聲明文件。

舉個例子，如果想安裝 lodash 類型聲明文件，我們可以運行下面的命令：

npm install --save-dev @types/lodash

想了解更多，可以查看 這篇文章。

導(dǎo)入其他資源

想要在 TypeScript 中使用非代碼資源(non-code asset)，我們需要告訴 TypeScript 推斷導(dǎo)入資源的類型。在項目里創(chuàng)建一個 ?custom.d.ts? 文件，這個文件用來表示項目中 TypeScript 的自定義類型聲明。我們?yōu)?nbsp;.svg 文件設(shè)置一個聲明：

custom.d.ts

declare module '*.svg' {
  const content: any;
  export default content;
}

H 這里，我們通過指定任何以 .svg 結(jié)尾的導(dǎo)入(import)，將 SVG 聲明(declare) 為一個新的模塊(module)，并將模塊的 content 定義為 any。我們可以通過將類型定義為字符串，來更加顯式地將它聲明為一個 url。同樣的概念適用于其他資源，包括 CSS, SCSS, JSON 等。

構(gòu)建性能

關(guān)于構(gòu)建工具，請查看 構(gòu)建性能 指南。