サイドバー
typescript:moduleのimport
目次
moduleのimport
関数などを別ファイルに分割したい場合。
復数に分割したファイルをそのまま<script src="xxx.js"></script>としても取り込んでもjavascriptは実行できない。
- 記号なしリスト.tsファイルを1つのファイルにまとめて.jsにコンパイルする。
- webpackやgulpといった別ツールを使って、コンパイルしたjsファイルのモジュールのバインドをする。
といったことが考えられるが、一番簡単なのはparcelを使用することのようだ。
parcelの使い方
1.npmの初期化
// プロジェクトのディレクトリに移動して >npm init
2.parcelのインポート
>npm install --save-dev parcel
3.ファイルを分けてexportとimport
- func.ts
export default function getAsterString(target:string):string{ return "*" + target + "*" }
- main.ts
import getAsterString from "./func" ... console.log(getAsterString("aaa"))
4.htmlでインポート
5.ローカルサーバーの起動
> npx parcel index.html --open
- ファイルの編集と同時にリロードされる（ホットリロードに対応！）
- TypeScriptのモジュールは自動でインストール！
- TypeScriptのソースマップが有効！
- tsconfig.jsonのカスタマイズ可能！
6.本番用のビルと
npx parcel build index.html
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”>
と変更する必要がある。
~~~以下の手順ではモジュールのバインドができていない（参考：後日修正予定）~~~
1.moduleを分ける
- comm/func.ts
export function getAsterString(target:string):string{ return "*" + target + "*" }
- main.ts
import { getAsterString } from "./comm/func" console.log(getAsterString("aaa"))
2.tsconfig.jsonの確認
- tsconfig.json
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ ↓moduleの設定を変える "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
3.htmlでインポート
tsc の–outオプションを付けて1つのファイルにまとめて出力するか、出来上がったjsファイルをすべて参照する必要がある。
- index.html
<body> ... <script src="./comm/func.js"></script> <script src="./main.js"></script> </body> </html>
// 実際にはまとまらない... >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'.
4.tscでコンパイル
>tsc main.ts comm/func.ts
typescript/moduleのimport.txt · 最終更新: 2020/09/23 12:09 by ips
