ただただ `import ’hoge’;` とか `require('hoge')`とかした場合について
ただただ import ’hoge’;
とか require('hoge')
とかした場合について確認した
会社で闇のコードを弄っているときにrequire('hoge')
みたいなのが無限に出てきた。
こいつってどんな形でimportされるんだ?ときになったので試してみた。
結論から言うと、クロージャの中にいて中のファイルたちはどこからも参照されない。
windowになんかぶら下げるとかする場合は意味があるけど、それ以外はまるで無視される。
経典MDNでは?
MDN曰く
付随効果のためだけにモジュールをインポートする
付随効果だけのためにモジュール全体をインポートしたときは、何もインポートされません。 モジュールのグローバルコードが実行されるだけで、実際の値はインポートされないのです。
まぁ、試すか、と言うわけで試した。
コード
■ test.js
const TEST = 'test';
■ index.js
require('./test.js') const peace = 'peace'
↓
/***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { __webpack_require__(/*! ./test.js */ "./src/test.js"); const peace = 'peace'; /***/ }), /***/ "./src/test.js": /*!*********************!*\ !*** ./src/test.js ***! \*********************/ /*! no static exports found */ /***/ (function(module, exports) { const TEST = 'test'; /***/ })
TEST
を参照することはできなさそう🤔
export
を追加
■ test.js
const TEST = 'test'; export const Dog = 'DOG' // 追加
■ index.js(一緒)
require('./test.js') const peace = 'peace'
↓
/***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { __webpack_require__(/*! ./test.js */ "./src/test.js"); const peace = 'peace'; /***/ }), /***/ "./src/test.js": /*!*********************!*\ !*** ./src/test.js ***! \*********************/ /*! exports provided: Dog */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Dog", function() { return Dog; }); const TEST = 'test'; const Dog = 'DOG'; /***/ })
export
されてるものに関しては__webpack_require__
でなんかされそうな雰囲気があるので試した。
■ test.js
export const TEST = 'test';
■ index.js(一緒)
require('./test.js'); console.log(TEST); // Uncaught ReferenceError: TEST is not defined
というわけで、MDNとおりでした。