かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript (ES2015) 同じ名前のモジュールをインポートしたい

webpackを調べていた時にwebpackのメリットとして

各モジュールを閉じたスコープにしてまとめてくれるので、モジュール名や変数名が被るのを気にする必要がなくなる

というのがありました。
で、同じモジュール名だったりした時、インポートする側はどうするんだろう?と思ったので調べてみたメモ
※ babelしてwebpackする前提で、node.jsでそのまま使う場合には触れていません。

同じ名前のモジュールをimportする場合 as でエイリアスを付ければOK

moduleA.js

export const square = (x) => {
  return x * x;
}

moduleB.js

export const cube = (x, y, z) => {
  return x * y * z;
}

export const hi = () => {
  console.log('Hi, i am module B');
}

moduleC.js

export const cube = (w, h) => {
  return w * w * h;
}

export const hi = () => {
  console.log('Hi, i am module C');
}

エントリーポイント main.js

import { cube } from './moduleB.js';
import { hi, cube rectangular  } from  './moduleB.js';
import * as mdc from  './moduleC.js';

console.log( 'moduleA cube 5 = ', cube(5) );

hi();
console.log( 'moduleB cube x5 y5 x10 = ', rectangular(5, 5, 10) );

mdc.hi();
console.log( 'moduleC cube w5 h10 = ', mdc.cube(5, 10) );

// => moduleA cube 5 =  125
// => Hi, i ammodule B
// => moduleB cube x5 y5 x10 =  250
// => Hi, i am module C
// => moduleC cube w5 h10 =  250

 

  • 特定のモジュールや変数をimportする場合はimport { export as alias } from "module"で指定して、aliasで実行する
  • *で全部importする場合はimport * as name from "module"で指定して、name.func(), name.varで実行する
    *を使う時 {* as name}とすると Module parse failed: Unexpected token エラーになるので注意
TODO

node.jsでそのままimport/export試そうとして、色々ハマったのでそれは追って書いておきたいと思います。


[参考]

コンテナ物語―世界を変えたのは「箱」の発明だった

コンテナ物語―世界を変えたのは「箱」の発明だった