我试图做

我写了一个虚拟模块我组分基本上出口的单一类东西找到模块。我把它放在app/modules/。现在我绑使用进口语法从应用访问它/ app.js：不能用的WebPack，打字稿，自定义模块目录

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。

唯一的组合失败是从我的模块/目录没有相对路径导入它。所以我认为这个问题可能是我的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' 
    ] 
    } 
};

编辑修正了项目布局。

来源

2016-10-20 JeffreyHammansson

不相信这是相关的，所以只是一个评论：你有没有尝试从'./my-component/Something';'在app.ts中导入{Something}？相对路径必须以./开头，如果不是，则假定“node_modules”。 –

我发现不是容易的解决方案以前接受的一个：

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

tsconfig.json：

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

说明：

默认情况下，Webpack和Typescript使用节点模块分辨率，这很好。尽管设置了自定义模块文件夹，但您需要在Webpack和Typescript配置中对它们进行配置。对Webpack模块解析配置的更改不会传播到Typescript编译器。

来源

2016-11-04 11:34:53 JeffreyHammansson

好的。我创建了一个项目结构的副本。看起来情况是，导入声明的行为与需要的行为不一样，并且，webpack resolve.root配置按照预期的那样工作。

对于模块，改变你的进口语句要求这样的：

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定义。不幸的是，我无法通过导入来实现。

我推动解决方案到repository。如果您需要，请检查它！

来源

2016-10-20 17:24:38

我特别不想引用它，因为组件可能会外包给独立的项目并通过npm进行安装。如果使用相对路径，这些引用将会中断。我对resolve.root的理解是，这是它应该做的事情：https：//webpack.github.io/docs/resolving.html（“...配置选项resolve.root中的目录被预先...” 。“） – JeffreyHammansson

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

对不起，这是我的错 - 我列出项目配置错误。 webpack.config.js位于项目的根目录下。对于那个很抱歉。 – JeffreyHammansson

找不到模块

如果遇到此问题，使用ESNEXT动态模块加载，

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

来源

2018-03-09 23:02:04 Legends

不能用的WebPack，打字稿，自定义模块目录

我试图做

我试图修复它

设置详细

回答

相关问题