使用 tsconfig-paths-webpack-plugin 会给 "fs" 和其他标准模块"Module not found"错误

我花了半天时间寻找解决方案，并尝试了我遇到的一切。我想要的是通过使用@src别名来使用相对于我的src文件夹的导入。例如。import { GmailMgr } from '@src/google-api/GmailMgr';

实现这一点最流行的方法似乎是使用https://www.npmjs.com/package/tsconfig-paths-webpack-plugin像这样编辑tsconfig.json让vs代码很开心：

{
"compilerOptions": {
"outDir": "./dist/",        // path to output directory
"sourceMap": true,          // allow sourcemap support
"strictNullChecks": true,   // enable strict null checks as a best practice
"module": "CommonJS",       // specify module code generation
"jsx": "react",             // use typescript to transpile jsx to js
"target": "es5",            // specify ECMAScript target version
"allowJs": true,            // allow a partial TypeScript and JavaScript codebase
"baseUrl": "./src",
"paths": {
"@src/*":["*"]
}
},
"include": [
"./src/"
]
}

为了通知webpack tsconfig.js中的路径，我将TsconfigPathsPlugin添加到webpack.config.js中，如自述文件中所述

const path = require("path");
const webpack = require("webpack");
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
entry: "./App.tsx",
context: path.resolve(__dirname, "src"),
mode: "development",
module: {
rules: [
{
test: /.(t|j)sx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
enforce: "pre",
test: /.js$/,
exclude: /node_modules/,
loader: "source-map-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
// changed from extensions: [".js", ".jsx"]
extensions: [".ts", ".tsx", ".js", ".jsx"],
alias: {
'react-dom': '@hot-loader/react-dom',
},
plugins: [new TsconfigPathsPlugin()]
},
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 45011,
publicPath: "http://localhost:45011/dist/",
hotOnly: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devtool: "source-map"
};

当我运行webpack --mode production时，我可以看到那些不使用node_modules但使用这种@src导入样式的文件已经编译好了，所以它可以工作，但我在一个文件中使用了google api包(错误中的GmailMgr.ts(，这些包依赖于fs、child_process、net和tls，对于它们中的每一个，我都会得到这样的错误：

ERROR in ../node_modules/https-proxy-agent/dist/agent.js
Module not found: Error: Can't resolve 'tls' in 'D:MartijnFilesDocumentsProgramming502-crewyoutube4menode_moduleshttps-proxy-agentdist'
@ ../node_modules/https-proxy-agent/dist/agent.js 16:30-44
@ ../node_modules/https-proxy-agent/dist/index.js
@ ../node_modules/gaxios/build/src/gaxios.js
@ ../node_modules/gaxios/build/src/index.js
@ ../node_modules/google-auth-library/build/src/transporters.js
@ ../node_modules/google-auth-library/build/src/index.js
@ ./google-api/GmailMgr.ts
@ ./components/YTNotifications.tsx
@ ./App.tsx

看起来它试图在模块的文件夹中查找fs等，而不是从node_modules根目录中开始查找。如果我删除了tsconfig-paths-webpack插件和路径，一切都很好，但我必须坚持像import { GmailMgr } from '../../../google-api/GmailMgr';这样的导入

附言：我试过webpack-node-externals，它可以解决错误，但这是针对一个网站的，所以我在浏览器中遇到了不存在的错误。

我遇到了同样的问题，但我认为这与特定的api无关。

我认为这是一个错误，当使用tsconfig路径webpack插件与webpack5。(我想你使用的是webpack5(

我在这里提交了一个问题：https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/60

我开始意识到，webpack只在需要节点执行的模块(例如fs(上有问题，浏览器无法执行。我认为谷歌api模块纯粹是用于后端的(而如果在html中使用，则可以完美地使用它们(。我想我得把我的应用程序分为前端和后端。

更新：我是对的，并将其拆分。然而，我仍然使用webpack，只是使用了不同的配置。在后端webpack中，我使用了target:'node'，它可以防止来自node_modules的任何内容被打包。

您可能需要指定src/的完整路径。我没有使用TsconfigPathsPlugin，而是通过在resolve中使用Webpackalias属性，并对我的源目录使用path.resolve(...)来解决这个问题。

在webpack.config.js:中

resolve: {
extensions: [ '.ts', '.js' ],
alias: {
'@src': path.resolve( __dirname, 'src' )
},
},

出于某种原因，使用完整路径有效，而在webpack.config.js中使用相对路径(如@src: './src'(则无效。我怀疑这就是为什么TsconfigPathsPlugin在从tsconfig.json.中提取相对路径时不起作用的原因

相关内容

最新更新

热门标签：