【typescript进阶篇】(第四章) webpack编译ts及第三方库声明文件

使用webpack打包TS文件

安装依赖

• 安装webpack环境 npm i webpack webpack-cli webpack-dev-server -D
• 安装TypeScript npm install typescript -D
• 编译TS npm install ts-loader -D
• 热更新服务 npm install webpack-dev-server -D
• HTML模板 npm install html-webpack-plugin -D

{
  "name": "webpackProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

webpack配置文件

// webpack.config.js
const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: "./src/index.ts",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },

  module: {
    rules: [
      {test: /\.ts$/, use: 'ts-loader', exclude:/node_modules/}
    ]
  },
  mode: "development",

  resolve: {
    extensions: [".ts", ".js"]
  },

  plugins: [
    new htmlWebpackPlugin({
      template: "./public/index.html"
    })
  ]
}

配置Babel

• 经过一系列的配置，使得 TS 和 webpack 已经结合到了一起，除了 webpack，开发中还经常需要结合 babel 来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将 babel 引入到项目中。

  1. 安装依赖包：

     • npm i -D @babel/core @babel/preset-env babel-loader core-js
     • 共安装了 4 个包，分别是：
       • @babel/core
         • babel 的核心工具
       • @babel/preset-env
         • babel 的预定义环境
       • @babel-loader
         • babel 在 webpack 中的加载器
       • core-js
         • core-js 用来使老版本的浏览器支持新版 ES 语法

  2. 修改 webpack.config.js 配置文件

      // ...other config...
      module: {
          rules: [
              {
                  test: /\.ts$/,
                  use: [
                      {
                          loader: "babel-loader",
                          options:{
                              presets: [
                                  [
                                      "@babel/preset-env",
                                      {
                                          "targets":{
                                              "chrome": "58",
                                              "ie": "11"
                                          },
                                          "corejs":"3",
                                          "useBuiltIns": "usage"
                                      }
                                  ]
                              ]
                          }
                      },
                      {
                          loader: "ts-loader",
     
                      }
                  ],
                  exclude: /node_modules/
              }
          ]
      }
     // ...other config...
     

     • 如此一来，使用 ts 编译后的文件将会再次被 babel 处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的 targets 中指定要兼容的浏览器版本。

TS描述文件声明

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库，比如 jQuery等等

声明文件以 .d.ts 为后缀 如：SayHello.d.ts

声明文件或模块的语法格式如下：declare module Module_Name { }

declare module "SayHello" {
    export function sayHello(name: string): void;
}

很多流行的第三方库的声明文件不需要我们定义了

• https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
• https://www.typescriptlang.org/dt/search?search=