使用tsconfig-paths webpack-plugin为"fs“和其他标准模块提供”模块未找到“错误。

Question

我花了半天时间寻找解决方案，并尝试了我遇到的每一件事。我想要的是使用@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包(错误中使用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:\MartijnFiles\Documents\Programming\0502-crew\youtube4me\node_modules\https-proxy-agent\dist'
 @ ../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路径webpack插件和路径，一切都很好，但是我必须坚持像import { GmailMgr } from '../../../google-api/GmailMgr';这样的进口。

我已经尝试过webpack-node-externals，它可以处理错误，但是这是针对网站的，所以我会在浏览器中得到不存在的错误。

Answer 1

我开始意识到webpack只在需要节点执行的模块上有问题(例如。而浏览器是做不到的。我认为google模块完全是为后端设计的(如果将它们包含在html中，则可以很好地使用它们)。我想我得把我的应用程序分成前端和后端。

更新：--我在这方面做得很对，把它分开了。然而，我仍然用webpack做这两件事，只是有不同的吐露。在后端webpack中，我使用了目标：“节点”，它可以阻止来自node_modules的任何东西被打包。

Answer 2

我遇到了同样的问题，但我不认为它与某些api有关。

我认为这是一个错误，当使用tsconfig-paths webpack-插件与webpack5。(我想你在使用webpack5)

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