【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=