ES Modules形式をCommonJS形式でも利用できるようにする

YAMAP エンジニア Advent Calendar 2019 の12日目になります。
YAMAPで、フロントエンドエンジニア？として活動中の @issyxissy です。
フロントエンドエンジニアと言っても、他にもいろいろなことやっています。

YAMAPでは、Nuxt.js + Vue.jsを使ったフロントエンドの開発を行っています。
( https://yamap.com をみていただければと〜）

最近、ちょっと悩んだことがあって、解決できたので、まとめてみました。

ケース

Node.js と Vue.jsで、共通関数を使いたい・・・

問題

Node.jsは、CommonJS 形式 (module.exports / require() )
Vue.js (ブラウザ環境) は、 ES Modules 形式 (export / import ) となるため、
共通関数をES Modules 形式で書くと、Node.js側で怒られるし、かといって、CommonJS 形式で書くと、Vue.js側で怒られる、どっちつかずな状況になります。

Node.jsのバージョンを上げたり、npmパッケージを作ったり　https://blog.hiroppy.me/entry/node-esm#ESM-in-Nodejs な感じで、ごにょごにょしたら出来ると思いますが、既存環境を壊したくないし、コストかけたくないし、悩んでいました。。。

あるあるなヤツです・・・( ꒪⌓꒪;

解決

どうにか出来ないかと、試行錯誤していましたが、esmという超便利なライブラリがありました。
https://github.com/standard-things/esm

このライブラリ、ES Modules形式を CommonJS形式で利用可能にする便利なヤツです。
(世の中には、便利なものを作る人たちがたくさんいて、素晴らしいと思います・・・感謝です）

$ npm install esm
or
$ yarn add esm

hogehoge.jsは、ES Modules形式で書いて、Node.jsには、↓のようにして、CommonJSに変換して利用できます(ノ ꒪⌓꒪)ノ

const requireEsm = require('esm')(module);
const { xxxx } = requireEsm('./hogehoge.js');

まとめ

• ES Modules形式で書いて、esmライブラリでCommonJS形式で変換してくれる便利なヤツ
• もっとエレガントに解決できる方法あったらいいなー