我正在尝试做什么

Question

我正在尝试做什么

我写了一个虚拟模块 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.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 动态模块加载遇到此问题，

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

Answer 2

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

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

tsconfig.json：

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

<强>解释

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

Answer 3

确定。我创建了项目结构的副本。似乎情况是 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。如果需要，请查看它！

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

我正在尝试做什么

我试图修复它

设置详细信息

3 个答案: