[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 项目中获得类型检查和智能提示。