JavaScript Moduleのメモ

JavaScript Module勉強中のメモです
環境：Webpack

ES6 export + ES6 import

現在一番よく使われているES6 export + importの組み合わせです

export側のjsは、export default Logを記入すればmoduleとして輸出することができます

log.js

function Log() {
    console.log('Log!')
}

export default Log;

import側は、default importを宣言した後、Log()を書けばmoduleを使えます

index.js

import Log from './log';

Log();

引数を使う場合はこうです

log.js

function Log(message) {
    console.log(`Log ${message}`)
}

export default Log;

index.js

import Log from './log';

const info = "Hey";
Log(info);

ちなみにVanilla JSでModule JSを使うのもOKです
一箇所だけ修正すれば使えます

-import Log from './log';
+import Log from './log.js';

ES6 export + require

export側はES6 exportの書き方で、import側はrequireの書き方でやってみます

export側はこうです

Log.js

function Log(message) {
    console.log(`Log ${message}`)
}

export default Log;

import側はこうなりました

index.js

const Log = require('./log');

const info = "Hey";
Log.default(info);

infoの呼び出しと引数を一行に簡略することが可能です

index.js

const info = "Hey";
require('./log').default(info);

webpackなしのVanilla JSはこういう書き方はダメです
require()はNode.js用なので、ブラウザーのJSはサポートしていないです

function + ES6 import

export側はmodule.exportsを使って書きます

log.js

module.exports = {
    print: function(message) {
        console.log(`Log ${message}`)
    }
}

import側はこうです

import Log from './log';

const info = "Hey";
Log.print(info);

これもブラウザーではだめです

function + require

jQuery時代でよく見れている組み合わせです

export側はこうです

log.js

module.exports = {
    print: function(message) {
        console.log(`Log ${message}`)
    }
}

import側はこうです

index.js

const Log = require('./log');

const info = "Hey";
Log.print(info);