Webpack解析扩展“找不到模块”

Question

我有一个相当复杂的项目，包括express和Angular同居。为了这篇文章的目的，我只担心快递方面。

我的服务器端自定义模块是这样导入的：

import { PayPal } from "@helpers/paypal";
import { Database } from "@models/database";

使用tsconfig.json中的baseUrl和路径

"baseUrl": ".", 
    "paths": {
      "@helpers/*": [
        "helpers/*"
      ],
      "@models/*": [
        "models/*"
      ]
    }

这一切都很可爱，但webpack根本不喜欢它：

Error: Cannot find module '@helpers/paypal'

Typescript（tsc）运行得很好，所以问题出在webpack中。有大量文档表明我应该添加别名，像这样添加到webpack.config：

   module.exports = {
  "resolve": {
    "extensions": [
      ".ts",
      ".js",
      ".json"
    ],
    alias: {
       "@helpers/*": path.resolve(path.join(__dirname, 'server', 'helpers')),
    },
    "modules": [
      "./node_modules"
    ],
    ...etc

我为路径尝试了许多组合，但似乎都没有。

编辑添加背景以填充结构图像

helpers文件夹的路径是： 的 /服务器/助手

我在打字稿中使用的导入语句是： 导入{PayPal}来自＆＃34; @ helpers / paypal＆＃34 ;;

Answer 1

Webpack别名不使用globs，但只要匹配别名键，该特定匹配将替换为您为其分配的值。由于server/helpers是一个目录，这意味着您只需要为其创建一个别名@helpers，每当您导入@helpers/paypal之类的内容时，它都会扩展为/absolute/path/to/server/helpers/paypal。

alias: {
  "@helpers": path.resolve(__dirname, "server", "helpers")
}

这是别名的常见用法，resolve.alias的文档解释了这一点。

摘自resolve.alias表：

| alias:                | import "xyz"       | import "xyz/file.js"          |
|-----------------------|--------------------|-------------------------------|
| { xyz: "/some/dir" }  | /some/dir/index.js | /some/dir/file.js             |
| { xyz$: "/some/dir" } | /some/dir/index.js | /abc/node_modules/xyz/file.js |
| { xyz: "./dir" }      | /abc/dir/index.js  | /abc/dir/file.js              |

Answer 2

您的文件名为 payPal，但您正在导入 paypal（大写）。