猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== moduleのimport ======

関数などを別ファイルに分割したい場合。
復数に分割したファイルをそのまま<html><script src="xxx.js"></script></html>としても取り込んでもjavascriptは実行できない。

  * 記号なしリスト.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>
export function getAsterString(target:string):string{
    return "*" + target + "*"
}
</code>

<code javascript main.ts>
import { getAsterString } from "./comm/func"

console.log(getAsterString("aaa"))
</code>

===== 2.tsconfig.jsonの確認 =====

<code 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'. */

</code>

===== 3.htmlでインポート =====
tsc の--outオプションを付けて1つのファイルにまとめて出力するか、出来上がったjsファイルをすべて参照する必要がある。
<code html index.html>
<body>
    ...
    <script src="./comm/func.js"></script>
    <script src="./main.js"></script>
</body>
</html>
</code>

<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>
>tsc main.ts comm/func.ts
</code>
猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
