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試そうとして、色々ハマったのでそれは追って書いておきたいと思います。
[参考]
- import | MDN
- ecmascript 6 - How to import two classes by the same name in javascript/es6? - Stack Overflow

- 作者: マルク・レビンソン,村井章子
- 出版社/メーカー: 日経BP社
- 発売日: 2007/01/18
- メディア: 単行本
- 購入: 6人 クリック: 72回
- この商品を含むブログ (48件) を見る