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

typescript webpack

695 观看

1回复

264 作者的声誉

我有一个非常复杂的项目,既有快速同居又有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文件夹的路径是: / server / helpers

我在打字稿中使用的导入语句是: 从“ @ helpers / paypal”导入{PayPal};

作者: Matt Knight 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

16741 作者的声誉

决定

Webpack别名不使用glob,但是只要匹配别名密钥,该特定匹配项就会替换为您为其分配的值。因为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              |
作者: Michael Jungo 发布者: 2017 年 9 月 15 日
32x32