为什么在生成的.dts
文件中导入的模块在tsconfig.json
选项中保留来自paths
的别名路径?如何解决?
实际:@/codes/classes/apollo
(无法从我的构建文件夹中解析)
预期:./classes/apollo
(可从构建文件夹中解析)
这是我的tsconfig.json
:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"declaration": true,
"declarationDir": "builds",
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"importHelpers": true,
"jsx": "preserve",
"jsxFactory": "Vue",
"lib": ["dom", "dom.iterable", "esnext", "scripthost"],
"module": "esnext",
"moduleResolution": "node",
"paths": {
"@/*": ["*"]
},
"sourceMap": true,
"strict": true,
"target": "esnext",
"types": ["jest", "node", "vuetify", "webpack-env"],
"typeRoots": ["node_modules/@types"]
},
"include": [
"codes/**/*.ts",
"codes/**/*.tsx",
"shims/**/*.ts",
"tests/**/*.ts",
"tests/**/*.tsx"
]
}
这是我的webpack.config.js
:
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin
const webpackNodeExternals = require('webpack-node-externals')
const config = {
mode: 'development',
context: path.resolve(__dirname),
entry: [
path.resolve(__dirname, 'codes', 'index.ts'),
path.resolve(__dirname, 'codes', 'index.css')
],
output: {
path: path.resolve(__dirname, 'builds'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
externals: [webpackNodeExternals()],
resolve: {
extensions: ['.js', 'jsx', '.ts', '.tsx', '.json'],
alias: {
'@': path.resolve(__dirname)
}
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
onlyCompileBundledFiles: true
}
}
],
},
{
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.styl$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'stylus-loader',
options: {
preferPathResolver: 'webpack',
sourceMap: true
}
}
]
},
{
test: /\.(aac|m4a|mp3|mp4|oga|wav|webm|gif|jpg|jpeg|png|svg|eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'index.css'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'codes', 'index.html'),
filename: 'index.html'
}),
new HotModuleReplacementPlugin()
],
devtool: 'source-map',
devServer: {
port: 8080,
contentBase: path.resolve(__dirname, 'builds'),
historyApiFallback: true,
compress: true,
hot: true
}
}
module.exports = config