xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

import script module All In One

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`)

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://gist.github.com/xgqfrms/1e3f49e27b36509ae814eccf8e52c6d4

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

https://www.sitepoint.com/using-es-modules/

https://javascript.info/modules-intro

https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import

https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2020-02-27 11:30  xgqfrms  阅读(325)  评论(12)  编辑  收藏  举报