👌
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);
Discussion