TypeScript Deep Dive 日本語版
検索…
TypeScript Deep Dive 日本語版
TypeScript Deep Dive 日本語版
TypeScript入門 & 環境構築
JavaScript
モダンなJavaScriptの機能
プロジェクトの環境設定
コンパイルコンテキスト
宣言空間
ファイルモジュール
名前空間
動的インポート
Node.js & TypeScriptのプロジェクト作成
React & TypeScriptのプロジェクト作成
TypeScriptの型システム
JSX
オプション
TypeScriptのエラー
NPM
テスト
ツール
その他のヒント
スタイルガイド(コーディング規約)
TypeScriptコンパイラの内側
GitBook
上で動作しています
動的インポート
動的インポート
は新しい機能であり、
ECMAScript
の一部で、ユーザーはプログラムの任意の時点でモジュールを非同期にロードできます。
TC39
(JavaScript committee)が、その提案(
import() proposal for JavaScript
)を行っており、ステージ3の段階にあります。
また、
webpack
バンドラにはバンドルを分割することができる
Code Splitting
という機能があります。それは、コードをチャンクファイルに分割し、後で非同期にダウンロードされるようにすることができます。たとえば、これにより、最小の起動用のバンドルを最初に提供し、後で追加の機能を非同期にロードすることができます。
私たちの開発ワークフローでwebpackを使用している場合、
TypeScript 2.4 dynamic import expressions
は
自動的に
チャンク化されたバンドルを生成し、最終的なJavaScriptバンドルを自動的に分割します。しかし、これは
tsconfig.jsonの設定
に依存しているので、そう簡単ではありません。
重要なことは、webpackのコード分割機能は、この目標を実現するための 2 つのやり方をサポートしているということです:
import()
(ECMAScriptの推奨)または、
require.ensure()
(従来から存在するwebpack固有の方法)がサポートされています。これが意味することは、TypeScriptにおいては、
import()文
を他の何らかの構文にトランスパイルするのではなく、そのままの形で出力しなければならない、ということです。
webpack + TypeScript 2.4の設定方法の例を見てみましょう。
次のコードは
moment
ライブラリを遅延ロードしようとしているコードです。しかし、それだけではなく、コード分割もしたいと思っています。つまり、momentライブラリを別のJavaScriptのチャンクファイルに分割して、必要なときだけロードされるようにしたい、ということです。このコメント
/* webpackChunkName: "momentjs" */
を
import
文に追加して、webpackのチャンク名を明示的に伝えることができます。
1
import
(
/* webpackChunkName: "momentjs" */
"moment"
)
2
.
then
((
moment
)
=>
{
3
// 遅延ロードされるモジュールでも、型が有効であり、自動補完や、型チェックが機能します \o/
4
const
time
=
moment
().
format
();
5
console
.
log
(
"TypeScript >= 2.4.0 動的インポートがサポートされています:"
);
6
console
.
log
(
time
);
7
})
8
.
catch
((
err
)
=>
{
9
console
.
log
(
"momentのロードに失敗しました"
,
err
);
10
});
Copied!
tsconfig.jsonは次のようになります:
1
{
2
"compilerOptions"
:
{
3
"target"
:
"es5"
,
4
"module"
:
"esnext"
,
5
"lib"
:
[
6
"dom"
,
7
"es5"
,
8
"scripthost"
,
9
"es2015.promise"
10
],
11
"jsx"
:
"react"
,
12
"declaration"
:
false
,
13
"sourceMap"
:
true
,
14
"outDir"
:
"./dist/js"
,
15
"strict"
:
true
,
16
"moduleResolution"
:
"node"
,
17
"typeRoots"
:
[
18
"./node_modules/@types"
19
],
20
"types"
:
[
21
"node"
,
22
"react"
,
23
"react-dom"
24
]
25
}
26
}
Copied!
重要
:
"module":"esnext"
を使うとTypeScriptは、Webpackコード分割に利用する見せかけのimport()文を生成します
さらに詳しい情報については、この記事を読んでください:
Dynamic Import Expressions and webpack 2 Code Splitting integration with TypeScript 2.4
完全な例は
ここ
で見ることができます。
前
名前空間
次
Node.js & TypeScriptのプロジェクト作成
最終更新
2yr ago
リンクのコピー