webpack 集成 Typescript && Less

TypeScript是JavaScript的一個類型化的超集，可以編譯成純JavaScript，在本指南中，我們將學習如何將Typescript與webpack集成。

基本設置

為了開始使用webpack和Typescript，首先我們必須在我們的項目中安裝webpack。 如果您沒有這樣做，請查看webpack安裝指南。

要開始使用包含Typescript的webpack，您需要幾件事情：

• 在您的項目中安裝Typescript編譯器。
• 安裝一個Typescript加載器（在這種情況下，我們使用的是ts-loader）。
• 創建一個tsconfig.json文件以包含我們的TypeScript編譯配置。
• 創建webpack.config.js以包含我們的webpack配置。
• 您可以通過運行以下方法從npm安裝TypeScript編譯器和TypeScript加載器：

npm install --save-dev typescript ts-loader

 

tsconfig.json
tsconfig文件可以作為一個空配置文件啟動，在這里可以看到一個基本配置示例，用於將TypeScript編譯為es5，並為JSX提供支持。

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

 

您可以在TypeScript文檔網站上閱讀有關tsconfig.json配置選項的更多信息

webpack.config.js

具有TypeScript配置的基本Webpack應該沿用這些代碼：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        app: './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'bundle/[name].bundle.js'
    },
    mode:"development",
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ]
};

 

這里我們將我們的入口點指定為我們當前目錄中的index.ts，一個名為bundle.js的輸出文件和我們的TypeScript加載器，負責將我們的TypeScript文件編譯為JavaScript。 我們還添加resolve.extensions來指示webpack在解析Typescript模塊時使用什么文件擴展名。

Typescript loaders

目前有兩種可用於TypeScript的loaders：

• awesome-typescript-loader

• ts-loader

令人敬畏的TypeScript加載程序創建了一個awesome-typescript-loader和ts-loader之間的區別精彩的解釋。

您可以在這里閱讀更多。 在本指南中，我們將使用ts-loader，因為更容易實現其他Webpack功能，例如將非代碼資源導入到項目中。

啟用源映射

為了啟用源映射，我們首先必須配置TypeScript以將內聯源映射輸出到我們編譯的JavaScript文件中。這通過將sourceMap屬性設置為true來完成.

tsconfig.json

{
  "sourceMap": true
}

 

一旦將TypeScript配置為輸出源映射，我們需要告訴webpack提取這些源映射並將其傳遞給瀏覽器，這樣我們就可以在我們的代碼編輯器中看到源文件。

webpack.config.js

module.exports = {
 entry: './index.ts',
 output: {
   filename: 'bundle.js',
   path: __dirname
 },
 module: {
   rules: [
     {
       enforce: 'pre',
       test: /\.js$/,
       loader: "source-map-loader"
     },
     {
       enforce: 'pre',
       test: /\.tsx?$/,
       use: "source-map-loader"
     }
   ]
 },
 resolve: {
   extensions: [".tsx", ".ts", ".js"]
 },
 devtool: 'inline-source-map',
};

 

首先我們添加一個名為source-map-loader的新加載器。

要安裝它運行：

npm install --save-dev source-map-loader

 

一旦加載程序安裝，我們需要告訴webpack我們要在任何其他加載程序之前使用enforce：'pre'配置標志來運行這個加載程序。 最后，我們需要通過指定devtool屬性來啟用webpack中的源映射。 目前我們使用'inline-source-map'設置來閱讀有關此設置的更多信息，並查看其他選項，以查看devtool文檔。

使用第三方庫

從npm安裝第三方庫時，請務必記住安裝該庫的typing定義。

您可以從@types存儲庫,安裝第三方庫定義。

例如，如果我們要安裝lodash，我們可以運行以下命令來獲取它的輸入：

npm install --save-dev @types/lodash

 

有關更多信息，請參閱此博文

導入非代碼部分資源

要使用TypeScript的非代碼資源，我們需要告訴TypeScript如何推遲這些導入的類型。

為此，我們需要創建一個custom.d.ts文件。 此文件表示我們項目中TypeScript的自定義定義。

在我們的custom.d.ts文件中，我們需要為svg導入提供一個定義，為此，我們需要將以下內容放在此文件中：

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

 

在這里，我們通過指定任何以.svg結尾的導入，為svg聲明一個新模塊，並將該模塊的類型定義為any。 如果我們想要更明確地說這是一個url，我們可以將類型定義為字符串。

這不僅適用於svg，而且還適用於您可能希望使用的任何自定義加載器，包括css，scss，json或您可能希望在項目中加載的任何其他文件。