代码之家 › 专栏 › 技术社区 › sam256

使用webpack捆绑资产并生成Typescript定义的规范方法

webpack typescript javascript

sam256 · 技术社区 · 4 年前

我有一个项目,用各种资产构建一个typescript库。以下是其webpack的配置方式:

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [{ loader: "@svgr/webpack", options: { typescript: true } }],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "my-icons.js",
    path: path.resolve(__dirname, "dist"),
    library: {
      name: "my-icons",
      type: "umd",
    },
  },
};

这很好。它转换资产,遵循Typescript,并将所有资产捆绑在一起。但它不会产生 .d.ts 文件,库的任何Typescript使用者都需要这些文件。

以下是我的研究结果:

这个 ts-loader 包裹 recommends 使用 DeclarationBunderPlugin 。但这是一个实验项目,已经六年没有更新了。
其他一些插件似乎不太受支持。看见 dts-bundle 中引用 this SO question 以及在回答该问题时提供的其他插件代码。中还引用了一个插件 this SO question 。
我还看到了一些建议 tsc 并通过 .d.ts 文件。请参阅中的评论这个SO问题例如另请参阅 even older SO question 。这很好,但我有点惊讶没有看到任何工具来处理这个问题。
据我所知,webpack文档在 its typescript section 。

是否有推荐/最佳/规范的方法?这只是3的某个版本吗。以上——即生成 .d.ts 文件,然后手动将它们添加到您的分发包中?

我把 a small example repo 这说明了仅使用 tsc 或 webpack 他们自己。

0 回复 | 直到 4 年前

sam256 4 年前

好吧,我觉得有点笨,但另一方面,这似乎没有得到很好的记录。

事实证明,如果您的webpack和tsconfig都设置为编译/构建到同一目录中,并且tsconfig设置为发出声明,并且您的webpack库设置为指向与package.json中的主条目(例如index.js)相同的入口点,则它将正常工作。

所以--

package.json:

//excerpt
"main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "build": "rimraf ./lib && webpack"
  },

tsconfig.json

//excerpt
  "compilerOptions": {
    "outDir": "lib",
    "declaration": true
}

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [{ loader: "@svgr/webpack", options: { typescript: true } }],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "lib"),
    library: {
      name: "my-icons",
      type: "umd",
    },
  },
};

工作示例在 this repo .就这么做吧 npm install && npm run build