找不到帶有 Webpack、Typescript 的模塊，自定義模塊目錄

Question

我正在嘗試做的事情

我寫了一個虛擬模塊my-component ，它基本上導出一個 class Something 。 我把它放在app/modules/中。 現在我想使用app/app.js的 import Syntax 來訪問它：

import { Something } from 'my-component';

期望：使用我當前的 Webpack 配置（如下），我希望這可以工作。

實際：這會引發錯誤：

ERROR in [default] /<project_dir>/app/app.ts:1:26
Cannot find module 'my-component/Something'.

我試圖解決的問題

我知道模塊本身的定義是正確的，因為

1. 我可以使用相對路徑導入它： import { Something } from './my-component'
2. 如果我將模塊移動到node_modules/my-component ，我可以按原樣導入它。

唯一失敗的組合是在沒有相對路徑的情況下從我的modules/目錄導入它。 所以我認為問題可能是我的 Webpack 配置。

設置詳情

正如您在下面看到的，我有兩個目錄列為resolve.root ：

• project_dir/app
• project_dir/node_modules

它似乎設法從node_modules解決，而不是從app解決。

項目布局

                               Webpack
project_dir/
 ├── app/                      context, resolve.root
 │    ├── app.ts
 │    └── my-component/
 │         ├── index.ts
 │         └── Something.ts
 ├── webpack.config.js
 ├── node_modules/             resolve.root
 │    ├── ...
 │    ├── ...
 │    └── ...
 └── dist/
      └── ...

應用程序/app.ts

import { Something } from 'my-component/Something';

應用程序/我的組件/index.ts

export { Something } from './Something'

應用程序/我的組件/Something.ts

class Something {
}

export { Something };

webpack.config.js

var path = require('path'),
  ROOT = path.resolve(__dirname, '.');

module.exports = {
  context: path.resolve(ROOT, 'app'),
  entry: 'app.ts',
  output: {
    path: path.resolve(ROOT, 'dist'),
    filename: '[name]-[hash].js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'awesome-typescript' }
    ]
  },
  resolve: {
    root: [
      path.resolve(__dirname, 'app'),
      path.resolve(__dirname, 'node_modules')
    ],
    extensions: [
      '', '.ts', '.js'
    ]
  }
};

編輯修復了項目布局。

Answer 1

找不到模塊

如果使用ESNEXT 加載動態模塊時遇到此問題，

你必須在你的tsconfig.json添加"moduleResolution": "node" 。

Answer 2

我找到了比之前接受的解決方案更簡單的解決方案

在您的打字稿配置中，在compilerOptions設置baseUrl ：

tsconfig.json ：

{
  "compilerOptions": {
    "baseUrl": "./app",
    ...
  },
  ...
}

---

說明：

Webpack和Typescript默認使用節點模塊解析，這很好。 在設置自定義模塊文件夾時，您需要在Webpack和Typescript配置中配置它們。 對Webpack模塊解析配置的更改不會傳播到Typescript編譯器。

Answer 3

好。 我創建了項目結構的副本。 似乎情況是import語句的行為與require不同 ，並且，webpack resolve.root配置按預期工作。

對於模塊，將import語句更改為要求如下：

app.ts

// Define require function for TypeScript to know that it
// will exist at runtime
declare function require(name:string);
// Require your module
var Something = require('my-component/Something');
// var myComponent = require('my-component');

我組分/ Something.ts

// Export something (used a function to test)
export function Something() {
    console.log("Hello");
}

我組分/ index.ts

// Definition of require function as mentioned before
declare function require(name:string);
// Passing other modules
var exportedModules = {
    Something: require("my-component/Something")
};
export default exportedModules;

像這樣，它可以正常工作，並解決您在Webpack中定義的模塊名稱。 不幸的是，我無法通過導入實現它。

我將解決方案推送到了存儲庫 。 如果需要，請查看！

Answer 4

唯一對我有用的是更改tsconfig.json如下：

 { "compilerOptions": { //... "baseUrl": "./src", "paths": { "@/*": ["src/*"] } }

其他一切都失敗了。