[Webpack] ts 编写的库， 在使用 webpack 构建的时候， 如何对外提供 d.ts【热度: 224】

[yanlele]

关键词：对外提供 d.ts

在 TypeScript (TS) 中使用 Webpack 构建并为库提供 .d.ts 类型声明文件，需要遵循以下步骤：

1. 配置 TypeScript 编译选项：
   在库项目的根目录下创建或编辑 tsconfig.json 文件，确保编译器配置选项如下：

   {
     "compilerOptions": {
       "declaration": true, // 生成对应的 '.d.ts' 文件
       "declarationDir": "types", // 指定生成的声明文件存放目录
       "outDir": "lib" // 指定编译后文件的输出目录
       // 其他需要的编译选项
     },
     "include": ["src/**/*"], // 包含源码的目录
     "exclude": ["node_modules"] // 排除的目录
   }

   • declaration: 这个选项会告诉 TypeScript 编译器为每个 .ts 文件生成相应的 .d.ts 声明文件。
   • declarationDir: 这是指定声明文件的输出目录。

2. 配置 Webpack：
   在我们的 Webpack 配置中（通常是 webpack.config.js），我们需要设置 output 以指向我们的输出目录，同时可能需要使用一些加载器(loader)如 ts-loader 或 babel-loader 来处理 TypeScript 文件。

   一个简单的 webpack 配置示例可能如下：

   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: "your-library.js", // 输出文件名
       path: path.resolve(__dirname, "lib"), // 输出文件夹
       libraryTarget: "umd", // 使库支持各种模块系统
       globalObject: "this",
     },
   };

3. 发布包：
   当你发布你的库时，你需要确保 package.json 文件中包含 types 或 typings 字段指向入口 .d.ts 文件。

   例如：

   {
     "name": "your-library",
     "version": "1.0.0",
     "main": "lib/your-library.js",
     "typings": "types/index.d.ts"
     // 其他配置项...
   }

   这告诉使用你库的 TypeScript 用户，在哪里可以找到类型声明文件。

4. 保证类型声明文件的发布：
   如果你的 npm 发布流程排除了 types 目录，你需要更新 .npmignore 文件来确保 .d.ts 文件会被包含在发布的 npm 包中。

完成这些配置后，当你用 webpack 构建并发布你的库时，用户将能够获得与 JavaScript 文件关联的 TypeScript 类型声明，以便在他们的 TypeScript 项目中获得类型检查和智能提示。