TypeScript+module読み込み

前提

インストール

code: sh

% npm install pts

インストールされました

code: package.json

{

..

"dependencies": {

"pts": "^0.9.4"

}

}

追加されてます。

他のパッケージにも言えることですが、

設定ファイルを自分で書かないといけないとなると面倒だけど、

勝手にインストールされてファイルが変更される分にはそんなに導入コストかからないですね。

モジュールimportの設定

code: tsconfig.json

{

"compilerOptions": {

...

"moduleResolution": "node"

}

}

typescriptでnode型のモジュール読み込みを行うためにはこのフラグを足す必要があるようです。

実際の利用

TypeScriptでは、

code: ts

import { Pt } from "pts";

const pos = new Pt(4, 4);

とすることでエラーが出なくなりますが、

ブラウザでの挙動

ブラウザで動かそうとすると、

Uncaught TypeError: Failed to resolve module specifier "pts". Relative references must start with either "/", "./", or "../".

パス指定がないとエラーがでます。

"../node_modules/pts/dist/pts";

拡張子をつけなくてもエラーがでます。

pts:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

そして、パスを指定してもうまくいかないようです。

import { Pt } from "../node_modules/pts/dist/pts.js";

Uncaught SyntaxError: The requested module '../node_modules/pts/dist/pts.js' does not provide an export named 'Pt'

import Pts from "../node_modules/pts/dist/pts.js";

Uncaught SyntaxError: The requested module '../node_modules/pts/dist/pts.js' does not provide an export named 'default'

そもそもデフォルトが指定されていないようです。

ESModulesに対応してそうな雰囲気があるけど、

公式GithubのOptionにないのでダメかもしれない。

code: index.html

<script type="text/javascript" src="node_modules/pts/dist/pts.min.js"></script>

code: pos.ts

const pos = new Pts.Pt(4, 4);

これでは、全てAny型として扱われてしまうので、TypeScriptの恩恵を何も得られなくなってしまいます。

code: ts

import type Pts from "../node_modules/pts/dist/pts.js";

こう書くことでTypescript部分のみで、型情報を読み込み、コンパイル後に消えてブラウザ側でもエラーがでなくなりますが、

実体参照部分はエラーになるままです。

ライブラリの対応の観点からは、WebPackなしでNode/ブラウザ両対応を実現するのはまだ難しいのかもしれません。