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. css选择器有哪些，选择器的权重的优先级

    选择器类型 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first-l ...

  2. 使用Robo 3T操作MongoDB数据库

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 在IDEA中用三个jar包链 ...

  3. Idea里面远程提交spark任务到yarn集群

    Idea里面远程提交spark任务到yarn集群 1.本地idea远程提交到yarn集群 2.运行过程中可能会遇到的问题 2.1首先需要把yarn-site.xml,core-site.xml,hdf ...

  4. Spark：常用transformation及action，spark算子详解

    常用transformation及action介绍,spark算子详解 一.常用transformation介绍 1.1 transformation操作实例 二.常用action介绍 2.1 act ...

  5. VIT Vision Transformer | 先从PyTorch代码了解

    文章原创自:微信公众号「机器学习炼丹术」 作者:炼丹兄 联系方式:微信cyx645016617 代码来自github [前言]:看代码的时候,也许会不理解VIT中各种组件的含义,但是这个文章的目的是了 ...

  6. DEDECMS：修改网站底部出现的POWER BY DEDECMS

    在include/dedesql.classs.php文件中找到第588行: $arrs1 = array(0x63,0x66,0x67,0x5f,0x70,0x6f,0x77,0x65,0x72,0 ...

  7. docker学习二

    B站视频地址 3.docker的基本操作 3.1 安装docker 1.下载关于Docker的依赖环境 想安装Docker,需要先将依赖的环境全部下载下来,就像Maven依赖JDK一样 yum -y ...

  8. F - Team Queue

    有n个队伍. 对于每个ENQUEUE  x 命令. 如果x所在的队伍已经在队列中, 则x排在队列中它的队伍的尾巴, 否则排在队列的末尾. 可以理解为队列中的队列的味道. Queues and Prio ...

  9. 2019牛客暑期多校训练营（第九场）D-Knapsack Cryptosystem（思维+子集和）

    >传送门<题意:给你一个有n个元素的数组,一个sum,让你找到数组的子集使得子集元素和等于sum,保证只有一个解决方案. (其中1≤n≤36,0≤ sum<9*1018,0<a ...

  10. 南阳ccpc C题 The Battle of Chibi && hdu5542 The Battle of Chibi (树状数组优化+dp)

    题意: 给你一个长度为n的数组,你需要从中找一个长度为m的严格上升子序列 问你最多能找到多少个 题解: 我们先对原序列从小到大排序,排序之后的序列就是一个上升序列 这里如果两个数相等的话,那么因为题目 ...