ただただ `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とおりでした。

以上です。