44799

[code]

    /* app.js */
    
    import Lib from 'lib';
    import useLib from './useLib';
    
    // Libを使う処理
    
[/code]

[code]

    /* useLib.js */
    
    // ここでもimportする必要がある？
    import Lib from 'lib';
    
    // Libを使う処理
    
[/code]

たとえば、あるユーティリティライブラリの `lib` を使いたいとき、大元の `app.js` で読み込んでおけば、子ファイルである `useLib.js`
でも使えると思ったのですが違うのでしょうか。

実際には、子ファイルでも `lib`
をimportしなければいけないようなので、一度importしたら子ファイルから呼び出せるようにしたいです。毎回、子ファイルにimportを書くのはちょっと違うなと思い、質問させていただきました。


CC BY-SA 4.0
2018-06-14T05:54:21.023
44769
2018-06-16T07:41:40.193
19687
question
javascript ecmascript-6
ES6のimportで読み込んだライブラリを子ファイルにも適用したい


# そのまま使うのは無理です

JavaScriptのimportしたモジュールはモジュールごとに分割されています.

現状,

[code]

    import Foo from './Foo';
    
[/code]

は

[code]

    const Foo = require('./Foo');
    
[/code]

のほとんど構文糖衣です.

そしてモジュールの変数はモジュールごとに分離されています.

よって参照を共通させることは出来ません.

これが出来てしまうと,importした先でモジュールの名前が衝突すると動かなくなり,モジュールを導入した意味がなくなってしまいます.

もしモジュールをimportなしに使えるとすると,例えばライブラリAがUtil.jsを作っているときに,アプリケーションにUtil.jsを追加してimportするとライブラリAのUtil.jsは上書きされてしまいます.

# re-exportと名前付きimportを使えばimportをまとめることは可能

re-exports.js

[code]

    export {default as os} from 'os';
    export {default as path} from 'path';
    
[/code]

use.js

[code]

    import {os, path} from './re-exports';
    
    console.log(os.arch());
    console.log(path.resolve('.'));
    
[/code]

このようにre-exportしたソースをimportすればimportは1回で済みますが,  
大した手間の削減にならないので,  
素直にimportをファイルごとに書くことを勧めます.


CC BY-SA 4.0
2018-06-16T07:41:40.193
44799
2018-06-16T07:41:40.193
12216
44769
answer