我正在尝试创建一个UI组件库(用于工作),我们已经用Typescript编写了它。我正在为最终版本进行webpack配置-我可以导出d.ts文件,但它们似乎不在正确的位置。那就是我现在得到的。
./dist
- comp1.js
- comp1.js.map
/components
/comp1
comp1.d.ts
我想我需要的是
./dist
- comp1.js
- comp1.js.map
- comp1.d.ts
这是我的webpack配置:
const { readdirSync } = require("fs");
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const getDirectories = source =>
readdirSync(source, { withFileTypes: true })
.filter(dirent => dirent.isDirectory())
.map(dirent => dirent.name);
const componentList = getDirectories(__dirname + "/src/components/");
const tsRule = {
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
options: {
configFile: "tsconfig-prod.json"
}
}
]
};
const jsRule = {
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
};
const miniCSSRule = {
test: /\.(css|sass|scss)$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
};
const baseConfig = {
mode: "production",
devtool: "source-map",
entry: componentList.reduce((pv, cv) => {
return { ...pv, [cv]: `${__dirname}/src/components/${cv}/index.tsx` };
}, {}),
output: {
filename: "[name].js",
chunkFilename: "[name]-[id].js",
path: __dirname + "/lib"
},
externals: [
nodeExternals(),
{
react: "React",
"react-dom": "ReactDOM"
}
],
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [tsRule, jsRule, miniCSSRule]
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
}
};
module.exports = baseConfig
这是我的tsconfig-prod.json文件。
{
"mode": "production",
"compilerOptions": {
"jsx": "react",
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"outDir": "./lib",
"removeComments": true,
"emitDeclarationOnly": false,
"isolatedModules": false,
"declaration": true,
"sourceMap": true
},
"include": [
"src/components/**/*"
],
"exclude": [
"**/Stories/*.*",
"**/*.test.*",
"**/*.spec.*",
"**/*.stories.*",
"**/__snapshots__"
]
}