首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >import模块失效

import模块失效

作者头像
阿超
发布于 2022-08-21 02:58:39
发布于 2022-08-21 02:58:39
1.1K00
代码可运行
举报
文章被收录于专栏:快乐阿超快乐阿超
运行总次数:0
代码可运行

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

报错信息如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Uncaught SyntaxError: Cannot use import statement outside a module

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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也是一样的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let ruben =  "module"
export default ruben

在外部引用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="module">
	import ruben from './js/module.js'
	console.log(ruben)
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-12-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6 | ES6 export,import,export default,import()
这是因为:虽然谷歌浏览器(chrome 61之后)已经支持es6的Module了,但是不能简单的直接使用,我们需要在script标签上加一个:type="module",或者我们可以使用babel 转成es5,这样也能愉快的使用import和export 。
倾盖
2022/08/16
4120
require和import的区别
CommonJs 规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的 exports属性(即module.exports)是对外的接口,加载某个模块,其实是加载该模块的module.exports属性。
木子星兮
2020/07/16
1.2K0
Uncaught SyntaxError: Cannot use import statement outside a module的解决方法(使用Es6语法引入js对象文件报错)
本地html文件中的script标签引入ES6的模块,直接在浏览器中打开该html文件,发现报错了:Uncaught SyntaxError: Cannot use import statement outside a module
超级小可爱
2023/02/20
1.9K0
三:多页面解决方案--提取公共代码
按照惯例,我们在src/文件夹下创建pageA.js和pageB.js分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.js和subPageB.js,而subPageA.js和subPageB.js又同时引用module.js文件。
心谭博客
2020/04/20
7510
JavaScript 学习-47.export 和 import 的使用
前言 JavaScript 的每个.js文件都是独立的,在开发一个项目会有很多的.js文件,有些是公共的方法,可以单独放到一个.js文件中,其它的文件去调用公共方法。 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持类(class),所以也就没有”模块”(module)了。 export导出模块 在es6以前,还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种:CommonJS 和 AMD ES6标准发布后,module成为标准,标准使
上海-悠悠
2022/09/28
9670
JavaScript 学习-47.export 和 import 的使用
前端模块化详解(完整版)
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本文试图站在小白的角度,用通俗易懂的笔调介绍这些枯燥无味的概念,希望诸君阅读后,对模块化编程有个全新的认识和理解!
Nealyang
2019/09/29
1.4K0
前端模块化详解(完整版)
前端错误捕获方案总结
本文主要摘抄自:https://juejin.cn/post/7172072612430872584#heading-10,主要用来记录和学习,也推荐大家看看原博主的文章。
蓓蕾心晴
2022/12/30
1.8K0
前端错误捕获方案总结
Vue学习-ES6的模块化实现
在实际编写js脚本时,可能会遇到多个js脚本中变量或函数重复命名的情况,如果全部为全局变量,则在使用的时候会产生很多麻烦。因此出现了模块化的概念,即可以把每一个js脚本当作一个独立的模块,不同模块间的内容互不干扰,这样在实际使用起来的时候会避免很多不必要的麻烦。
花猪
2022/02/17
4230
前端模块化
export = foo 是 ts 为了兼容 commonjs 创造的语法,它对应于 commonjs 中的 module.exports = foo。
hss
2022/02/25
4640
前端模块化详解(完整版)
上例子通过jquery方法将页面的背景颜色改成红色,所以必须先引入jQuery库,就把这个库当作参数传入。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。
小生方勤
2019/06/01
2.2K0
9.Vue之webpack打包基础---模块化思维
现实工作中, 一个项目可能会有多个人同时开发. 然后, 将所有人开发的内容, 合并到一个文件中. 比如: 1. 有3三个人同时开发, 一个人一个js文件, 最后引入到main.js 2. 每个人单独写, 这样, 定义的变量可能会重名, 那么在main.js中取值赋值就可能会出现问题
用户7798898
2021/03/05
4760
小结ES6基本知识点(六):模块的语法
ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。
前端林子
2019/04/07
2.8K0
小结ES6基本知识点(六):模块的语法
全面认识ECMAScript模块
ECMAScript模块(简称ES模块)是2015年推出的JavaScript中代码重用的机制。在高度碎片化的JavaScript模块场景中,它终于成为了标准。
前端开发博客
2020/11/04
6180
【ES6+】013-ES11新特性:matchAll、类的私有属性、Promise.allSettled、可选链操作符、动态import导入、BigInt、globalThis对象
訾博ZiBo
2025/01/06
850
【ES6+】013-ES11新特性:matchAll、类的私有属性、Promise.allSettled、可选链操作符、动态import导入、BigInt、globalThis对象
【模块化】:ES6 模块化
import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息,比如说这个模块的URL。
WEBJ2EE
2022/03/30
6510
【模块化】:ES6 模块化
what is 模块化?
将一个复杂的程序按照一定的规范,封装成几个块(文件),并进行组合在一起。 这些模块,最好都做到可复用性,比如可以在多个文件中使用处理时间的模块。
用户4793865
2023/01/12
1.3K0
what is 模块化?
你真的了解esModule吗
项目中我们常常会接触到模块,最为典型代表的是esModule与commonjs,在es6之前还有AMD代表的seajs,requirejs,在项目模块加载的文件之间,我们如何选择,比如常常因为某个变量,我们需要动态加载某个文件,因此你想到了require('xxx'),我们也常常会用import方式导入路由组件或者文件,等等。因此我们有必要真正明白如何使用好它,并正确的用好它们。
Maic
2022/07/28
4480
你真的了解esModule吗
【JS ES6】use strict 严格模式
由于 JavaScript 语法不够严谨,一直被人们所诟病,例如在使用一个变量时,可以不使用 var 关键字来提前声明(例如:url = 'http://c.biancheng.net/';),此时 JavaScript 解释器会自动为您创建这个变量。为了使代码更加严谨,JavaScript 中引入了严格模式,一旦使用了严格模式,将不再允许使用那些不严谨的语法。
坚毅的小解同志的前端社区
2022/11/28
2K0
【JS ES6】use strict 严格模式
ES2020的新特性:String 的 matchAll 方法、动态导入语句 import()等
matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。可以使用 for...of 遍历,或者使用 展开运算符(...) 或者 Array.from 转换为数组.
前端达人
2021/06/16
7470
ES6中模块导入遇到的问题及其解决办法
今天遇到了一个小的问题,我们来看一下,情况是这样的:在没遇到过这个坑之前,如果需要引入一个模块,我通常的做法都是在HTML文件中内嵌一个script标签,并通过指定 type="module" 来实现;然而今天我却没有按照往常这样做,而是指定两个js文件,其中一个文件通过 export 暴露出需要的变量和函数,在另一个文件中通过 import 导入,结果就遇到了报错,来给各位看下报错信息:
石璞东
2020/09/25
1.7K0
ES6中模块导入遇到的问题及其解决办法
相关推荐
ES6 | ES6 export,import,export default,import()
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验