ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

require('./module').defaultについて

javascript

GWから乃木坂にハマりました、お久しぶりです。

後輩氏がjsやってて、なんだこれってツイート見たので書いとこうってモチベ

jsのモジュール

JSのモジュールはけっこういっぱいある（nodeのcommonjsがcommonjsじゃない問題はめんどくさいので置いとく）
よく見るのは下の2種類

  • ES Modules: ECMA Scriptの仕様
  • CommonJS: Node.jsが採用してるモジュールシステム

ES Modulesの実装状況

chromeとかedgeみたいな一部だと実装されてるけど
ES Modulesで書かれたものは基本動かない

なのでNode.jsで動かす時なんかはcommonjsに変換する

commonjsへの変換

esmodules => commonjsの変換はBabelやTypescript使う気がする

www.typescriptlang.org

babeljs.io

今回はbabel使って試してみる

変換

とりあえずesmodulesで書かれたものを用意する

export default class Nogizaka {
  constructor() {}
}

これをbabelで変換(babel-preset-es2015とか)すると

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Nogizaka = function Nogizaka() {
  _classCallCheck(this, Nogizaka);
};

exports.default = Nogizaka;

重要なのはexports.defaultの部分で、export defaultになってるのでrequire('./module').defaultと書く必要が出て来る

これをNode.jsとかのコードでよく見るmodule.exports = Nogizakaにしたい

module.exports = Nogizakaしたい

babelにはbabel-plugin-add-module-exportsってプラグインがある
それを使用するとmodule.exportsの行が追加される

npm i -D babel-plugin-add-module-exports
babel --presets=es2015 --plugins=add-module-exports index.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Nogizaka = function Nogizaka() {
  _classCallCheck(this, Nogizaka);
};

exports.default = Nogizaka;
module.exports = exports["default"];

これで一応.defaultしなくてもrequire('./module')でいけるようになる

まとめ

乃木坂はいいぞー