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. 语言反射规则 - The Laws of Reflection

    [译]Go反射的三个原则(官方博客) | seven的分享 https://sevenyu.top/2019/12/21/laws-of-reflection.html wilhg/The-Laws- ...

  2. apache httpclient 4 范例

    下面是一个通过apache httpclient 4 实现http/https的普通访问和BasicAuth认证访问的例子.依赖的第三方库为: 下面是具体实现: package test; impor ...

  3. 题解 CF620E 【New Year Tree】

    有关dfs序的例题,需要有一定的位运算基础 题面 给定一个树,树上有颜色,将某一子树的颜色统一修改,求子树中颜色的数量 Solution 子树修改,子树求和,dfs序的知识(类似区间修改区间求和) 考 ...

  4. 通过 JFR 与日志深入探索 JVM - TLAB 原理详解

    全系列目录:通过 JFR 与日志深入探索 JVM - 总览篇 什么是 TLAB? TLAB(Thread Local Allocation Buffer)线程本地分配缓存区,这是一个线程专用的内存分配 ...

  5. Docker中运行nginx

    Docker中运行nginx 1.Docker中运行nginx 2.配置文件 2.1 nginx.conf 2.2 default.conf 3.docker的镜像可以挂什么卷 部分内容原文地址: C ...

  6. 将一个 JavaBean 对象转化为一个 Map

    package com.loan.modules.common.util; import java.beans.BeanInfo; import java.beans.IntrospectionExc ...

  7. Neo4j 导入 Nebula Graph 的实践总结

    摘要: 主要介绍如何通过官方 ETL 工具 Exchange 将业务线上数据从 Neo4j 直接导入到 Nebula Graph 以及在导入过程中遇到的问题和优化方法. 本文首发于 Nebula 论坛 ...

  8. Java中finalize()方法的作用

    finalize方法是Object提供的的实例方法,使用规则如下: 当对象不再被任何对象引用时,GC会调用该对象的finalize()方法 finalize()是Object的方法,子类可以覆盖这个方 ...

  9. Flink-v1.12官方网站翻译-P004-Flink Operations Playground

    Flink操作训练场 在各种环境中部署和操作Apache Flink的方法有很多.无论这种多样性如何,Flink集群的基本构件保持不变,类似的操作原则也适用. 在这个操场上,你将学习如何管理和运行Fl ...

  10. Jenkins（5）生成allure报告

    前言 jenkins集成了allure插件,安装插件后运行pytest+allure的脚本即可在jenkins上查看allure报告了. allure安装 在运行代码的服务器本机,我这里是用的dock ...