import script module All In One

.mjs / ESM

`<script type="module">`


<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>


// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

https://jakearchibald.com/2017/es-modules-in-browsers/

demos

mjs


<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>geoJSON to SVG</title>
</head>
<body>
    <svg data-uuid="live_map_svg" id="live_map_svg" width="100%" height="100%" viewBox="0 0 1000 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
    <!-- js -->
    <script type="module" src="./index.js"></script>
    <script type="module">
      import test from './test.js';
      test();
    </script>
    <!-- <script type="module">
      import {convert} from './convert.mjs';
      convert('Modules are pretty cool.');
    </script>
    <script type="module">
      import test from './test.js';
      test();
    </script> -->
</body>
</html>


// geoJSON

const log = console.log;

// import areas from "./geo-area-json.json";
import {convert} from './convert.mjs';
convert('Modules are pretty cool.');

// log(`log`, areas)


log(`log`)