@ledsun blog

無味の味は佳境に入らざればすなわち知れず

script type moduleでCommonJSモジュールを読み込むとどうなるのか?

npm install debounce

してあるディレクトリで次のように、script type="module"を使って、debounceを読み込んでみましょう。

<html>

<head>
  <script type="module">
    import { debounce } from './node_modules/debounce/index.js';
  </script>
</head>

</html>

debounceはunderscore.jsのdebounce関数だけを切り出したCommonJSモジュールです。 HTTPサーバーを起動して、index.htmlを開くと、次のエラーが起きます。

Uncaught SyntaxError: The requested module './node_modules/debounce/index.js' does not provide an export named 'debounce'

exportされていないものをimportしようとしたエラーになります。

CommonJSモジュールはscript type="module"では使えません。 ということは、世の中に100万個あるnpmパッケージ*1の大半は使えなさそうです。 CommonJSモジュールをESモジュールに変換する汎用的な方法があれば、夢が広がるのですが・・・そんなことできるのでしょうか?