import模块失效

简介: import模块失效

一点浩然气,千里快哉风。——宋•苏轼

昨天公司实习生问我这个import为什么一直报错,他代码如下:

报错信息如下:

Uncaught SyntaxError: Cannot use import statement outside a module

实际上是因为script标签没有加type导致的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="module">
      import {ruben} from './js/module.js'
      console.log(ruben)
    </script>
  </body>
</html>

这样就可以了

可以看到正常输出

当然,我们使用export default也是一样的

let ruben =  "module"
export default ruben

在外部引用

<script type="module">
  import ruben from './js/module.js'
  console.log(ruben)
</script>

相关文章
|
10月前
|
Java 测试技术 API
Java RESTful中的PATCH请求:局部更新与资源修改
在RESTful架构中,PATCH请求是一种用于局部更新已有资源的操作。PATCH请求允许客户端将部分数据发送到服务器,以便对资源进行局部修改,而不必替换整个资源。本文将引导您深入了解Java中使用PATCH请求构建RESTful API,探讨其特点、实现方式、用例以及在实际应用中的优势。
|
2天前
|
XML 数据格式 Python
Python的`import`用于加载模块,基础形式是`import module`,全量导入
【6月更文挑战第23天】Python的`import`用于加载模块,基础形式是`import module`,全量导入;`from module import name`选择性导入部分,减少命名空间污染;`from module import *`导入所有(不推荐),易引发冲突。别名导入如`from math import sqrt as square_root`可避免冲突。包导入用`.`,如`import xml.etree.ElementTree as ET`。
23 8
|
1月前
|
前端开发
ES6 如何动态加载 import
ES6 如何动态加载 import
52 1
|
7月前
|
PHP C语言 Python
import方法引入模块详解
import方法引入模块详解
|
11月前
|
XML 缓存 SpringCloudAlibaba
Spring注解导入:@Import使用及原理详解
`@Import` 是 Spring 基于 Java 注解配置的主要组成部分,`@Import` 注解提供了类似 `@Bean` 注解的功能,向Spring容器中注入bean,也对应实现了与Spring XML中的<import/>元素相同的功能
733 0
|
12月前
|
JSON 缓存 Serverless
23.从入门到精通:Python模块 import 语句 from … import 语句 from … import * 语句 深入模块 修改my_module的源代码
23.从入门到精通:Python模块 import 语句 from … import 语句 from … import * 语句 深入模块 修改my_module的源代码
|
缓存 JavaScript 前端开发
import...from... 和 require 如何找到模块位置?
昨天写了一篇文章,是关于 Vite 的,基于 Vite 从 0 到 1 启动一个 Vue2 项目,文章后面留下了几个问题是关于模块寻址问题,举个 Vue 项目里比较常用的 Vue 模块导入例子 import Vue from "vue"; 为什么不用写相对地址和绝对地址就能够导出 Vue 呢?似乎也没有配置路径?也没有配置映射,那么究竟 from "vue"; 对应的究竟是那个路径呢?
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
|
存储 Java Unix
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点
在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入想一想:为什么必须加上模块名调用呢?因为可能存在这样一种情况:在多个模块中含有相同名称的函数,此时如果只是通过函数名来调用,解释器无法知道到底要调用哪个函数。所以如果像上述这样引入模块的时候,调用函数必须加上模块名通过这种方式引入的时候,调用函数时只能给出函数名,不能给出模块名,但是当两个模块中含有相同名称函数的时候,后面一次引入会覆盖前一次引入。也就是说假如模块A中有函数fun
168 1
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点
|
JavaScript
vue3不在手动引入import {ref} from ‘vue‘ 等 也能照样运行项目(unplugin-auto-import)
vue3不在手动引入import {ref} from ‘vue‘ 等 也能照样运行项目(unplugin-auto-import)
529 0