Webpackで名前にハイフンを含むモジュールをimportする

2286 ワード
es2015 webpack JavaScript JavaScript テキストリンク

どうすればいいか

ケバブケースの名前をキャメルケースに書き換える。

例：
moment-duration-formatというモジュール名なら
import momentDurationFormat from 'moment-duration-format'

と書く。

何がしたかったのか

Webpackを使ってJavaScriptをクライアントサイドで実行している環境で、moment-duration-formatという、時間（期間）の表示を簡単にするライブラリ（Nodeモジュール）を導入したかった。

webpackを使っているので、ES Moduleスタイルで
import moment-duration-format from 'import-duration-format'と書いた。

どんな問題が起きたか

moment-duration-formatは時間を扱うライブラリであるmomentを拡張するライブラリであるためimport部は以下のようになるが

index.js
import moment 'import-duration-format'
import moment-duration-format from 'import-duration-format'

javascriptでは-が算術演算子として予約済みなせいか、momentが一つのシンボルとして認識されてしまう。

なぜかVSCodeの画面では import ... =' can only be used in a .ts file. というエラーメッセージとなっている。

ブラウザ上のJavaScriptコンソールではModule parse failed: Identifier 'moment' has already been declared と上の行でmoment本体をimportしていることと関連したエラーメッセージとなっていた。

なおmomentのimportをコメントアウトした場合のエラーメッセージとしては Module parse failed: Unexpected tokenとなり、import文の途中で算術演算子が登場することを怒られるようだ。