script element의 module type의 사용에 대하여

module방식으로 js를 문서내에 포함시키는 방법에 대해 다양한 상황에 대한 테스트를 해보고자 한다

값들의 유효범위와 로드 되는 시점에 대해 주목하라

Y29uc3QgZXhwcmVzcyA9IHJlcXVpcmUoJ2V4cHJlc3MnKQpjb25zdCBhcHAgPSBleHByZXNzKCkKY29uc3QgcG9ydCA9IDMwMDAKYXBwLmdldCgnLycsIGZ1bmN0aW9uIChyZXEsIHJlcykgewogICAgcmVzLnNlbmQoYAogICAgPCFET0NUWVBFIGh0bWw+CiAgICA8aHRtbD4KICAgIDxib2R5PgogICAgICAgIDxzY3JpcHQ+CiAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJyxlPT57CiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygnV0wnLHBlcmZvcm1hbmNlLm5vdygpKTsKICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKG1ha2VyKTsKICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKHZhcmlhKTsKICAgICAgICAgICAgfSk7CiAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgY29uc29sZS5sb2coJ0xPRzEnKTsKICAgICAgICA8L3NjcmlwdD4KICAgICAgICA8c2NyaXB0IHR5cGU9Im1vZHVsZSIgc3JjPSIvb3V0ZXIuanMiIG9ubG9hZD0iY29uc29sZS5sb2coJ0xPQURFRCcscGVyZm9ybWFuY2Uubm93KCkpIj48L3NjcmlwdD4KICAgICAgICA8c2NyaXB0PgogICAgICAgICAgICBjb25zb2xlLmxvZygnTE9HMicpOwogICAgICAgICAgICBjb25zb2xlLmxvZyhtYWtlcik7CiAgICAgICAgPC9zY3JpcHQ+CiAgICA8L2JvZHk+CiAgICA8L2h0bWw+ICAgIAogICAgYCkKfSkKYXBwLmdldCgnL291dGVyLmpzJywgZnVuY3Rpb24gKHJlcSwgcmVzKSB7CiAgICByZXMuaGVhZGVyKCdDb250ZW50LVR5cGUnLCAndGV4dC9qYXZhc2NyaXB0JykKICAgIHJlcy5zZW5kKGAKICAgICAgICBjb25zb2xlLmxvZygnTE9HMycpOwogICAgICAgIGltcG9ydCB7IHRpZ2VyLCBtYWtlciB9IGZyb20gJy4vZmlsbGVyLmpzJzsKICAgICAgICBpbXBvcnQgeyBtYW5nbywgYXBwbGUgfSBmcm9tICcuL21vZHVsZXIuanMnOwogICAgICAgIGltcG9ydCB0dXJuZSwgeyBhdHRydiB9IGZyb20gJy4vZXh0cmVuLmpzJzsKICAgICAgICBsZXQgdmFyaWEgPSB0aWdlcigpOwogICAgICAgIGNvbnNvbGUubG9nKHZhcmlhKTsKICAgICAgICBjb25zb2xlLmxvZyh0dXJuZSk7CiAgICAgICAgY29uc29sZS5sb2cobWFuZ28pOwogICAgICAgIGNvbnNvbGUubG9nKGFwcGxlKTsKICAgICAgICBjb25zb2xlLmxvZyhtYWtlcik7CiAgICAgICAgd2luZG93LmV4cG9yID0gdHVybmU7CiAgICAgICAgd2luZG93Lm1ha2VyID0gbWFrZXI7CiAgICAgICAgY29uc29sZS5sb2coJ0VORCcscGVyZm9ybWFuY2Uubm93KCkpOwogICAgYCkKfSkKYXBwLmdldCgnL2ZpbGxlci5qcycsIGZ1bmN0aW9uIChyZXEsIHJlcykgewogICAgcmVzLmhlYWRlcignQ29udGVudC1UeXBlJywgJ3RleHQvamF2YXNjcmlwdCcpCiAgICByZXMuc2VuZChgCiAgICAgICAgZXhwb3J0IGxldCBpbnRlciA9ICfrgrTrtoDsl5Ag64Sj7J2AIOqwkiAxJzsKICAgICAgICBleHBvcnQgZnVuY3Rpb24gbWFrZXIoKSB7CiAgICAgICAgICAgIHJldHVybiB0aWdlcjsKICAgICAgICB9CiAgICAgICAgZXhwb3J0IGZ1bmN0aW9uIHRpZ2VyKCkgewogICAgICAgICAgICByZXR1cm4gaW50ZXI7CiAgICAgICAgfQogICAgYCkKfSkKYXBwLmdldCgnL21vZHVsZXIuanMnLCBmdW5jdGlvbiAocmVxLCByZXMpIHsKICAgIHJlcy5oZWFkZXIoJ0NvbnRlbnQtVHlwZScsICd0ZXh0L2phdmFzY3JpcHQnKQogICAgcmVzLnNlbmQoYAogICAgICAgIGV4cG9ydCBsZXQgbWFuZ28gPSAzMjM7CiAgICAgICAgZXhwb3J0IGxldCBhcHBsZSA9IDU2NzsKICAgIGApCn0pCmFwcC5nZXQoJy9leHRyZW4uanMnLCBmdW5jdGlvbiAocmVxLCByZXMpIHsKICAgIHJlcy5oZWFkZXIoJ0NvbnRlbnQtVHlwZScsICd0ZXh0L2phdmFzY3JpcHQnKQogICAgcmVzLnNlbmQoYAogICAgICAgIGV4cG9ydCBsZXQgYXR0cnYgPSAn64K067aA7J2YIOqwkic7CiAgICAgICAgZXhwb3J0IGRlZmF1bHQgewogICAgICAgICAgICBoZXJtZTogMTIzLAogICAgICAgICAgICBhcnRpZjogW10sCiAgICAgICAgfTsKICAgIGApCn0pCmFwcC5saXN0ZW4ocG9ydCwgZnVuY3Rpb24gKCkgewogICAgY29uc29sZS5sb2coYGFwcGxpY2F0aW9uIGlzIGxpc3RlbmluZyBvbiBwb3J0ICR7cG9ydH0uLi5gKQp9KQo=


     const express = require('express')
     const app = express()
     const port = 3000
     app.get('/', function (req, res) {
     res.send(`
     <!DOCTYPE html>
     <html>
     <body>
     <script>
     window.addEventListener('load',e=>{
     console.log('WL',performance.now());
     console.log(maker);
     console.log(varia);
     });
     </script>
     <script>
     console.log('LOG1');
     </script>
     <script type="module" src="/outer.js" onload="console.log('LOADED',performance.now())"></script>
     <script>
     console.log('LOG2');
     console.log(maker);
     </script>
     </body>
     </html>
     `)
     })
     app.get('/outer.js', function (req, res) {
     res.header('Content-Type', 'text/javascript')
     res.send(`
     console.log('LOG3');
     import { tiger, maker } from './filler.js';
     import { mango, apple } from './moduler.js';
     import turne, { attrv } from './extren.js';
     let varia = tiger();
     console.log(varia);
     console.log(turne);
     console.log(mango);
     console.log(apple);
     console.log(maker);
     window.expor = turne;
     window.maker = maker;
     console.log('END',performance.now());
     `)
     })
     app.get('/filler.js', function (req, res) {
     res.header('Content-Type', 'text/javascript')
     res.send(`
     export let inter = '내부에 넣은 값 1';
     export function maker() {
     return tiger;
     }
     export function tiger() {
     return inter;
     }
     `)
     })
     app.get('/moduler.js', function (req, res) {
     res.header('Content-Type', 'text/javascript')
     res.send(`
     export let mango = 323;
     export let apple = 567;
     `)
     })
     app.get('/extren.js', function (req, res) {
     res.header('Content-Type', 'text/javascript')
     res.send(`
     export let attrv = '내부의 값';
     export default {
     herme: 123,
     artif: [],
     };
     `)
     })
     app.listen(port, function () {
     console.log(`application is listening on port ${port}...`)
     })