找不到带有 Webpack、Typescript、自定义模块目录的模块

Posted 2023-03-13

【中文标题】找不到带有 Webpack、Typescript、自定义模块目录的模块

【英文标题】：Cannot find module with Webpack, Typescript, custom module directory

【发布时间】：2017-03-02 15:50:15

【问题描述】：

我想要做什么

我编写了一个虚拟模块 my-component，它基本上导出了一个类 Something。我把它放在 app/modules/ 中。现在我想使用 app/app.js 的导入语法来访问它：

import  Something  from 'my-component';

期望：使用我当前的 Webpack 配置（如下），我希望它能够工作。

实际：这会引发错误：

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

我试图解决的问题

我知道模块本身的定义是正确的，因为

我可以使用相对路径导入它：import Something from './my-component' 如果我将模块移动到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/app.ts

import  Something  from 'my-component/Something';

app/my-component/index.ts

export  Something  from './Something'

app/my-component/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'
    ]
  
;

编辑 修复了项目布局。

【问题讨论】：

不确定这是否相关，所以只是评论：您是否在 app.ts 中尝试过import Something from './my-component/Something';？相对路径必须以 ./ 等开头。如果不是，则假定为“node_modules”。

【参考方案1】：

好的。我创建了您的项目结构的副本。似乎情况是 import 语句的行为与 require 不同，并且，webpack resolve.root 配置按预期工作。

对于模块，将您的 import 语句更改为 require，如下所示：

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 中定义的模块名称进行解析。不幸的是，我无法通过 import 实现它。

我将解决方案推送到repository。有需要就去看看吧！

【讨论】：

我特别不想相对引用它，因为组件可能会外包给单独的项目并通过 npm 安装。如果使用相对路径，这些引用将中断。我对 resolve.root 的理解是它应该这样做：webpack.github.io/docs/resolving.html ("...配置选项 resolve.root 中的目录被前置...")

明白了！我会用相应的方法编辑答案。

对不起，这是我的错——我列出了错误的项目配置。 webpack.config.js 位于项目的根级别。对此感到抱歉。

更改答案以提出新的解决方案。请检查并发表评论。

你说得对，我认为它工作的唯一方法是使用 require 语法。问题似乎是使用“import ... from absolutePath”语法尚未正确解决导入问题。谢谢！

【参考方案2】：

我找到了一个比之前接受的更简单的解决方案：

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

tsconfig.json:

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

---

说明：

Webpack 和 Typescript 默认使用 node 模块解析，这很好。 但是，在设置自定义模块文件夹时，您需要在 Webpack 和 Typescript 配置中配置它们。 对 Webpack 模块解析配置的更改不会传播到 Typescript 编译器。

【参考方案3】：

找不到模块

如果您在使用ESNEXT 进行动态模块加载时遇到此问题，

您必须将"moduleResolution": "node" 添加到您的tsconfig.json。