我有一個專案，它構建了一個包含各種資產的打字稿庫。以下是其 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軟體包建議使用DeclarationBunderPlugin。但這是一個六年沒有更新的實驗專案。Some other plugins to handle this that don't seem particularly well supported. See dts-bundle referenced in this SO question as well as other plugin code provided in answers to that question. There is also a plugin referenced in this SO question.
I've also seen recommendations to just run
tscand copy over the.d.tsfiles. See the comments in this SO question, for example. See also this even older SO question. That's fine, but I was a little surprised not to see any tooling to handle this.As far as I can tell, the webpack documentation is silent on this in its typescript section.
是否有推薦/最佳/規范的方法？它只是上面 3. 的某個版本——即，.d.ts單獨生成檔案并手動將它們添加到您的分發包中？
我整理了一個小示例 repo，演示了僅使用tsc或單獨使用的問題webpack。
uj5u.com熱心網友回復：
好吧，我覺得有點愚蠢，但另一方面，這似乎并沒有得到很好的記錄。
事實證明，如果您的 webpack 和 tsconfig 都設定為編譯/構建到同一目錄中，并且您的 tsconfig 設定為發出宣告，并且您的 webpack 庫設定為與包中的主條目相同的入口點。 json（例如 index.js），它將正常作業。
所以 -
包.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",
},
},
};
這個 repo中有一個作業示例。做就是了npm install && npm run build
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440116.html
標籤：javascript 打字稿 网页包
上一篇：如何使用create-react-app從webpack中的捆綁檔案路徑、publicPath、PUBLIC_URL中洗掉初始斜杠？
下一篇：有沒有辦法用貓鼬過濾這個請求？