microsoft / microsoft/TypeScript

tsc does not use amd-module name when emitting dynamic imports

オープン
#29,480 コメント 0 件 リアクション 21 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Awaiting More Feedback Domain: JS Emit Suggestion
主要言語
Go
スター
111k
フォーク
14.3k
平均マージ
2日 4時間
マージ済み PR(30日)
132

説明

TypeScript Version: 3.3.0-dev.20190118

Search Terms: amd-module, optional, dynamic, directive

Code

Scripts/foo.ts

///<amd-module name="customNameFoo" />

export function hello() {
    console.log('hello world');
}

Scripts/bar.ts

///<amd-module name="customNameBar" />

async function myFunction(): Promise<void> {
	//Dynamically import foo
        var fooModule = await import('./foo');

	fooModule.hello();
}

tsconfig.json

{
	"compileOnSave": true,
	"compilerOptions": {
		"target": "es5",
		"outDir": "GeneratedScripts",
		"module": "amd",
		"lib": [
			"es2015.promise",
			"dom",
			"es5",
			"scripthost"
		]
	},
	"include": [
		"Scripts/**/*"
	],
	"exclude": [
		"GeneratedScripts"
	]
}

would expect that the call to require would use the amd-module name for foo ("customNameFoo") and not "./foo". (If we non-dynamically imported foo, then the generated 'define' would refer to foo by it's amd-module name)
GeneratedScripts/bar.js

//...

return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, new Promise(function (resolve_1, reject_1) { require(['./foo'], resolve_1, reject_1); })];
                    case 1:
                        fooModule = _a.sent();
                        fooModule.hello();
                        return [2 /*return*/];
                }
            });

Expected behavior: The generated amd code for a dynamic import should use the name of the module specified in the amd-module directive

Actual behavior: The generated code for the dynamic import uses relative path to the module

Related Issues:
https://github.com/Microsoft/TypeScript/pull/1158
https://github.com/Microsoft/TypeScript/issues/28760

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

Scripts/foo.ts、Scripts/bar.ts、tsconfig.json を使って問題を再現し、次に AMD 動的インポートの出力に関するコンパイラーのエントリーポイントを調べます。GeneratedScripts/bar.js を期待される出力と比較します。生成された require 呼び出しが './foo' ではなく foo のカスタム AMD モジュール名 customNameFoo を使用すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
compilers
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。