import script module

.mjs



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

refs

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-2020

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

import script module的更多相关文章

  1. ou can mix require and export. You can't mix import and module.exports.

    ou can mix require and export. You can't mix import and module.exports.

  2. 在eclipse中用java调用python报错 Exception in thread "main" ImportError: Cannot import site module and its dependencies

    最近做项目需要用java调用python,配置了jython后,运行了例子代码: 获得一个元组里面的元素: import org.python.util.PythonInterpreter; publ ...

  3. [Angular 2] Import custom module

    The application structure: in app.module.ts: import { NgModule} from "@angular/core"; impo ...

  4. solution for python can not import local module

    blog 这次遇到的问题是sys.path的输出不包含'',导致无法import当前文件和文件夹 When no ._pth file is found, this is how sys.path i ...

  5. virtualenvwrapper.sh: There was a problem running the initialization hooks. If Python could not import the module virtualenvwrapper.hook_loader, check that virtualenvwrapper.........（解决办法）

    Linux(ubuntu)上python2与python3共存环境下,安装virtualenvwrapper后, 其环境变量被自动设置为VIRTUALENVWRAPPER_PYTHON=/usr/bi ...

  6. import 本地Python module或package

    很基础很重要的一课,虽然很简单,但是防止以后忘了,还是记下来 这个笔记里说的都是import本地的,自己创建的,或者复制粘贴的别人的,总之“不是安装到library”的module or packag ...

  7. python中from module import * 的一个陷阱

    from module import *把module中的成员全部导到了当前的global namespace,访问起来就比较方便了.当然,python style一般不建议这么做,因为可能引起nam ...

  8. Python: import vs from （module) import function(class) 的理解

    Python: Import vs From (module) import function(class) 本文涉及的 Python 基本概念: Module Class import from . ...

  9. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

随机推荐

  1. 「THP3考前信心赛」题解

    目录 写在前面 A 未来宇宙 B 空海澄澈 C 旧约酒馆 算法一 算法二 D 博物之志 算法一 算法二 算法三 写在前面 比赛地址:THP3 考前信心赛. 感谢原出题人的贡献:第一题 CF1422C, ...

  2. COGS 307 模拟退火

    307. [HAOI2006] 均分数据 ★★   输入文件:data.in   输出文件:data.out   简单对比时间限制:3 s   内存限制:128 MB [问题描述] 已知N个正整数:A ...

  3. Java调用RestFul接口

    使用Java调用RestFul接口,以POST请求为例,以下提供几种方法: 一.通过HttpURLConnection调用 1 public String postRequest(String url ...

  4. 最简单直接地理解Java软件设计原则之单一职责原则

    理论性知识 定义 单一职责原则, Single responsibility principle (SRP): 一个类,接口,方法只负责一项职责: 不要存在多余一个导致类变更的原因: 优点 降低类的复 ...

  5. Java 操作Oracle数据库

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  6. OpenStack (cinder存储服务）

    cinder简介 提供 OpenStack 存储块(Volume)服务,该管理模块原来也为 Nova 的一部分,即 Nova-volume,后来从 Folsom 版本开始使用 Cinder 来分离出块 ...

  7. cassandra权威指南读书笔记--Cassandra架构(2)

    环和令牌cassandra的数据管理是用一个环来表示.为环中的每个节点分配一or多个数据范围,用token描述.token由64位整数ID表示,范围-2^(63)~2^(63)-1.使用对分区键进行一 ...

  8. 昨晚12点，女朋友突然问我：你会RabbitMQ吗？我竟然愣住了。

    01为什么要用消息队列? 1.1 同步调用和异步调用 在说起消息队列之前,必须要先说一下同步调用和异步调用. 同步调用:A服务去调用B服务,需要一直等着B服务,直到B服务执行完毕并把执行结果返回给A之 ...

  9. 调试lcd时候给linux单板移植tslib

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述  tslib背景: 在采用触摸屏的移动终端中,触摸屏性能的调试是个重要问题之一,因为电磁噪声的缘故,触 ...

  10. F - F(最小生成树)

    题意:连通各点最短距离,最小生成树. You are assigned to design network connections between certain points in a wide a ...