web-dev-qa-db-ja.com

Webpack、TypeScript、カスタムモジュールディレクトリのモジュールが見つかりません

私がやろうとしていること

私はダミーモジュールを書いています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'.

私がそれを修正しようとしたこと

モジュール自体が正しく定義されていることはわかっています。

  1. 相対パスを使用してインポートできます：import { Something } from './my-component'
  2. モジュールをnode_modules/my-componentに移動すれば、そのままインポートできます。

失敗する唯一の組み合わせは、私のmodules /ディレクトリから相対パスなしでインポートすることです。したがって、問題はWebpackの構成にあると思います。

セットアップの詳細

以下に示すように、2つのディレクトリがresolve.rootとしてリストされています。

  • project_dir/app
  • project_dir/node_modules

appからではなく、node_modulesから解決できたようです。

プロジェクトレイアウト

                               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'
    ]
  }
};

[〜＃〜] edit [〜＃〜]プロジェクトのレイアウトを修正しました。

javascripttypescriptimportmodulewebpack
7
JeffreyHammansson

以前に受け入れられたものよりも簡単な解決策を見つけました：

TypeScript構成で、baseUrlをcompilerOptionsに設定します：

tsconfig.json：

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

説明：

WebpackとTypeScriptはデフォルトでノードモジュール解決を使用しますが、これは問題ありません。ただし、カスタムモジュールフォルダーを設定する場合は、WebpackとTypeScriptの両方の構成で構成する必要があります。 Webpackモジュールの解決設定への変更は、TypeScriptコンパイラに伝達されません。

6
JeffreyHammansson

モジュールが見つかりません

動的モジュール読み込みESNEXTを使用してこの問題が発生した場合、

"moduleResolution": "node"をtsconfig.jsonに追加する必要があります。

11
Legends

OK。プロジェクト構造のレプリカを作成しました。 importステートメントがrequire、AND、webpack resolve.rootconfigと同じように動作しない場合があるようです。期待どおりに動作します。

モジュールの場合、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');

my-component/Something.ts

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

my-component/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では実現できませんでした。

ソリューションを リポジトリ にプッシュしました。必要に応じてチェックしてください！

2
E. Salazar