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形式で変換してくれる便利なヤツ
- もっとエレガントに解決できる方法あったらいいなー