typescript:moduleのimport
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
|
typescript:moduleのimport [2020/09/22 01:01] ips 作成 |
typescript:moduleのimport [2020/09/23 12:09] (現在) ips [6.本番用のビルと] |
||
|---|---|---|---|
| ライン 2: | ライン 2: | ||
| 関数などを別ファイルに分割したい場合。 | 関数などを別ファイルに分割したい場合。 | ||
| + | 復数に分割したファイルをそのまま<html><script src="xxx.js"></script></html>としても取り込んでもjavascriptは実行できない。 | ||
| - | ===== moduleを分ける ===== | + | * 記号なしリスト.tsファイルを1つのファイルにまとめて.jsにコンパイルする。 |
| + | * webpackやgulpといった別ツールを使って、コンパイルしたjsファイルのモジュールのバインドをする。 | ||
| + | といったことが考えられるが、一番簡単なのは<wrap hi>parcel</wrap>を使用することのようだ。 | ||
| + | |||
| + | [[https://docs.solab.jp/typescript/module/external/|外部モジュール]] | ||
| + | [[https://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules|TypeScriptで複数ファイル構成する2つの方法]] | ||
| + | |||
| + | ====== parcelの使い方 ====== | ||
| + | |||
| + | [[https://ics.media/entry/190325/|TypeScriptのビルドにオススメ！Parcel入門]] | ||
| + | |||
| + | ====== 1.npmの初期化 ====== | ||
| + | <code> | ||
| + | // プロジェクトのディレクトリに移動して | ||
| + | >npm init | ||
| + | </code> | ||
| + | |||
| + | ====== 2.parcelのインポート ====== | ||
| + | <code> | ||
| + | >npm install --save-dev parcel | ||
| + | </code> | ||
| + | |||
| + | ====== 3.ファイルを分けてexportとimport ====== | ||
| + | |||
| + | <code javascript func.ts> | ||
| + | export default function getAsterString(target:string):string{ | ||
| + | return "*" + target + "*" | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | <code javascript main.ts> | ||
| + | import getAsterString from "./func" | ||
| + | ... | ||
| + | |||
| + | console.log(getAsterString("aaa")) | ||
| + | </code> | ||
| + | |||
| + | ====== 4.htmlでインポート ====== | ||
| + | <code html> | ||
| + | <body> | ||
| + | ... | ||
| + | <script src="main.ts"></script> //.tsにすること！ | ||
| + | </body> | ||
| + | |||
| + | </code> | ||
| + | |||
| + | ====== 5.ローカルサーバーの起動 ====== | ||
| + | <code> | ||
| + | > npx parcel index.html --open | ||
| + | </code> | ||
| + | |||
| + | <WRAP center round tip 90%> | ||
| + | * ファイルの編集と同時にリロードされる（ホットリロードに対応！） | ||
| + | * TypeScriptのモジュールは自動でインストール！ | ||
| + | * TypeScriptのソースマップが有効！ | ||
| + | * tsconfig.jsonのカスタマイズ可能！ | ||
| + | </WRAP> | ||
| + | |||
| + | ====== 6.本番用のビルと ====== | ||
| + | <code> | ||
| + | npx parcel build index.html | ||
| + | </code> | ||
| + | |||
| + | <WRAP center round important 90%> | ||
| + | htmlファイルのjs参照が | ||
| + | <script src="main.ts"></script> | ||
| + | のようにトップディレクトリにあると、ビルド後は | ||
| + | <script src="/main.2799c73f.js">となってしまい、jsが参照できない。 | ||
| + | |||
| + | サブディレクトリを作成してtsの作成やコンパイルをするか、コンパイル後のhtmlの参照を | ||
| + | <script src="./main.2799c73f.js"> | ||
| + | <script src="main.2799c73f.js"> | ||
| + | と変更する必要がある。 | ||
| + | </WRAP> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | ====== ~~~以下の手順ではモジュールのバインドができていない（参考：後日修正予定）~~~ ====== | ||
| + | |||
| + | ===== 1.moduleを分ける ===== | ||
| <code javascript comm/func.ts> | <code javascript comm/func.ts> | ||
| ライン 17: | ライン 101: | ||
| </code> | </code> | ||
| - | ===== tsconfig.jsonの確認 ===== | + | ===== 2.tsconfig.jsonの確認 ===== |
| <code json tsconfig.json> | <code json tsconfig.json> | ||
| ライン 28: | ライン 112: | ||
| </code> | </code> | ||
| - | ===== htmlでインポート ===== | + | ===== 3.htmlでインポート ===== |
| tsc の--outオプションを付けて1つのファイルにまとめて出力するか、出来上がったjsファイルをすべて参照する必要がある。 | tsc の--outオプションを付けて1つのファイルにまとめて出力するか、出来上がったjsファイルをすべて参照する必要がある。 | ||
| <code html index.html> | <code html index.html> | ||
| ライン 39: | ライン 123: | ||
| </code> | </code> | ||
| - | ===== tscでコンパイル ===== | + | <code> |
| + | // 実際にはまとまらない... | ||
| + | >tsc main.ts comm/func.ts --out all.js | ||
| + | comm/func.ts:1:17 - error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'. | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ===== 4.tscでコンパイル ===== | ||
| <code> | <code> | ||
| >tsc main.ts comm/func.ts | >tsc main.ts comm/func.ts | ||
| </code> | </code> | ||
typescript/moduleのimport.1600704092.txt.gz · 最終更新: 2020/09/22 01:01 by ips
