TypescriptでCDNのライブラリを使う(JavaScript)

開発環境

typescriptでnode_modulesからimport文を書いたものの、ライブラリ自体はCDNから取得して使いたいことってよくありますよね。でもImportせずにライブラリの変数を使うとエラーになるし、typescriptでどうやったらいいの?ってのをメモしておきます。
※なおWebpack使っている人のみが対象です。

今回はHighchartsを利用しているパターンを例に挙げます。

import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
import ExportData from 'highcharts/modules/export-data';

Exporting(Highcharts);
ExportData(Highcharts);

Highcharts.chart(...略);

HighchartsをCDNから使おうと思うとまず思いつくのは上の5行を全部消すことです。
JSならそれでよいでしょう。
が、typescriptでは Cannot find name ‘Highcharts’. のようなエラーが発生します。
importしないんだからあるわけないんですが、でもscriptタグに書いてあるので実行時にはある予定なんです。

解決方法の1つはd.tsファイルを作って、Highchartsの変数を宣言しておくことです。
そして今回書く解決方法はimport文はそのままにして、Webpackのconfigでimportの対象を無視する方法です。

具体的には上記のコードをこう変えます。消した2行に関してはimportする場合には実行する必要があるものの、CDNから利用する場合は自動で実行されるコードになるため削除します。

import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
import ExportData from 'highcharts/modules/export-data';

Highcharts.chart(...略);

html側にCDNからのscriptタグを追記します。

html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

そして一番重要なWebpackの設定をこうします。
Keyがimportするモジュールで、valueの方は変数名に相当する値だと思います。

module.exports = {
  ...,
    externals: {
        highcharts: 'Highcharts',
        'highcharts/modules/exporting': 'Exporting',
        'highcharts/modules/export-data': 'Exporting',
    },
}

externalsに指定されているモジュールはコンパイル時に無視され、出力するjsファイルに含まれなくなります。
tsファイルのコード上はimportしているけれども、js上はimportしてない状態になるわけですね。
なのでtsファイルでエラーは発生せず、コンパイルも無事通る状態になります。

コメント