我有這個webpack.config.js：
{
target: 'node',
mode: 'production',
// devtool: 'source-map',
entry: {
index: './source/lib/index.ts',
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
include: path.resolve(__dirname, 'source'),
use: [
{
loader: 'ts-loader',
options: {
compiler: 'ttypescript'
}
}
]
}
]
},
plugins: [
new BundleDeclarationsWebpackPlugin({
entry: "./source/lib/index.ts",
outFile: "./index.d.ts"
})
],
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'bundled', 'lib'),
filename: 'index.js',
library: 'mongo-cleaner',
libraryTarget: 'umd',
globalObject: 'this',
umdNamedDefine: true,
}
}
在那里你可以看到我將一個庫與 webpack 捆綁在一起，將 node_modules 保持為外部。
這tsconfig.json：
{
"compilerOptions": {
"moduleResolution": "node",
"module": "commonjs",
"target": "ES5",
"strictNullChecks": true,
"lib": [
"ES2021"
],
"outDir": "../dist",
"sourceMap": true,
"declaration": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./lib/*"
],
"@lib/*": [
"./lib/*"
],
"@bin/*": [
"./bin/*"
]
}
},
"plugins": [
{
"transform": "typescript-transform-paths"
},
{
"transform": "typescript-transform-paths",
"afterDeclarations": true
}
],
"include": [
"lib",
"bin"
]
}
當我做tsc -p source所有事情時，即使我的要求中有“@”路徑
但是當我對 webpack 做同樣的事情時，我得到了這些錯誤：
ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'
webpack怎么可能忽略@？
要獲得更多資訊并能夠重現它，只需查看此 repo
更新：
我也試過這個答案，但它不起作用：
webpack.config.js
alias: {
'@': path.resolve(__dirname, 'lib'),
'@lib': path.resolve(__dirname, 'lib'),
'@bin': path.resolve(__dirname, 'bin')
}
錯誤：
ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'
ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'
uj5u.com熱心網友回復：
您已經為 typescript 編譯器指定了路徑別名，但您還需要為 webpack 指定別名，因為 webpack 以自己的方式決議模塊。
因此，您需要更新 webpack 配置，如下例所示：
{
...
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@': path.resolve(__dirname, 'source/lib'),
'@lib': path.resolve(__dirname, 'source/lib'),
'@bin': path.resolve(__dirname, 'source/bin')
}
}
...
}
uj5u.com熱心網友回復：
@Mikhail Sereniti 的答案會起作用，但是一個模塊可以自動處理這個問題。
我添加了這個：
plugins: [new TsconfigPathsPlugin({
configFile: './source/tsconfig.json',
extensions: ['.ts', '.js']
})]
它奏效了。
完整代碼：
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const BundleDeclarationsWebpackPlugin = require('bundle-declarations-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const libConfig = {
target: 'node',
mode: 'production',
// devtool: 'source-map',
entry: {
index: './source/lib/index.ts',
},
resolve: {
extensions: ['.ts', '.js'],
plugins: [new TsconfigPathsPlugin({
configFile: './source/tsconfig.json',
extensions: ['.ts', '.js']
})]
},
module: {
rules: [
{
test: /\.ts$/,
include: path.resolve(__dirname, 'source'),
use: [
{
loader: 'ts-loader',
options: {
compiler: 'ttypescript'
}
}
]
}
]
},
plugins: [
new BundleDeclarationsWebpackPlugin({
entry: "./source/lib/index.ts",
outFile: "./index.d.ts"
})
],
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'bundled', 'lib'),
filename: 'index.js',
library: 'mongo-cleaner',
libraryTarget: 'umd',
globalObject: 'this',
umdNamedDefine: true,
}
};
const binConfig = {
target: 'node',
mode: 'production',
// devtool: 'source-map',
entry: {
index: './source/bin/index.ts',
},
resolve: {
extensions: ['.ts', '.js'],
plugins: [new TsconfigPathsPlugin({
configFile: './source/tsconfig.json',
extensions: ['.ts', '.js']
})]
},
plugins: [
new webpack.BannerPlugin({ banner: '#!/usr/bin/env node', raw: true })
],
module: {
rules: [
{
test: /\.ts?$/,
include: path.resolve(__dirname, 'source'),
use: [
{
loader: 'ts-loader',
options: {
compiler: 'ttypescript'
}
},
{
loader: 'shebang-loader'
}
]
}
]
},
externals: [{
'../lib/index': {
amd: '../lib/index',
root: 'mongo-cleaner',
commonjs: '../lib/index',
commonjs2: '../lib/index'
},
}, nodeExternals()],
output: {
path: path.resolve(__dirname, 'bundled', 'bin'),
filename: 'index.js',
library: 'mongo-cleaner',
libraryTarget: 'umd',
globalObject: 'this',
umdNamedDefine: true,
}
};
module.exports = [
libConfig,
binConfig
];
編輯：
我還發現了另一個錯誤。我用于ttypescript類似目的，但“插件”關鍵字應該在編譯器選項中。
所以，即使沒有這個TsconfigPathsPlugin東西，通過改變tsconfig.json這樣的問題解決了：
{
"compilerOptions": {
"moduleResolution": "node",
"module": "commonjs",
"target": "ES5",
"strictNullChecks": true,
"lib": [
"ES2021"
],
"outDir": "../dist",
"sourceMap": true,
"declaration": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./lib/*"
],
"@lib/*": [
"./lib/*"
],
"@bin/*": [
"./bin/*"
]
},
"plugins": [
{
"transform": "typescript-transform-paths"
},
{
"transform": "typescript-transform-paths",
"afterDeclarations": true
}
],
},
"include": [
"lib",
"bin"
]
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/462604.html