Webpack解析擴展「找不到模塊」

我有一個相當複雜的項目，既有express和Angular同居。爲了這張貼的目的，我只是擔心明確的一面。Webpack解析擴展「找不到模塊」

我的服務器端自定義模塊均採用進口這樣的：

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

使用一個的baseUrl和路徑在tsconfig.json

"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

我已經嘗試了多種組合的路徑，但沒有一個似乎工作。

編輯添加的上下文中的文件夾結構圖像

傭工文件夾的路徑是： /服務器/傭工

是在打字稿工作我的import語句是： 進口{@ helpers/paypal「中的{PayPal};

來源

2017-09-15 Matt Knight

Webpack別名不使用球體，但每當別名鍵匹配時，該特定匹配將被替換爲您分配給它的值。因爲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    |

來源

2017-09-15 08:51:41

我感謝你的幫助。不幸的是，我仍然沒有得到解決該模塊的webpack。我嘗試了幾種排列方式（包括您提供的排列方式）並查閱了resolve.alias文檔。我相信這是簡單的，但我忽略它。 –

您的webpack配置是否在您的項目的根目錄中？ ['__dirname']（https://nodejs.org/api/modules.html#modules_dirname）是當前執行文件（wepack配置）的絕對路徑。如果這不是問題，請發佈'webpack --display-error-details'的輸出。 –

是的，webpack.config位於項目的根目錄下。有趣的是，webpack --display-error-details的輸出是乾淨的。所以，現在讓我想到我在運行我的服務器版本時看到的錯誤與其他內容有關。我會將這個答案標記爲正確的，因爲你幫了我很多並開始一個新的問題。 –

Webpack解析擴展「找不到模塊」

回答

相關問題