JavaScript使用export和import的两个报错如何解决

3403771864 发布于2023-01-20 08:28 / 1589人阅读

　　前言

　　本篇文章主要为大家叙述关于JavaScript中的export和import，这两个常见的报错。

　　报错：Uncaught SyntaxError: Cannot use import statement outside a module

　　上面标书的是无法在module以外使用import，在网上进行查阅之后才了解到，这是由于script标签默认是使用JavaScript语言，使用ES6的语法会发生解析错误，需要在script标签中加入type=“module”，具体如下：

　　<script type="module">
　　import Rotation from '../js/ui.js'
　　Rotation();
　　</script>

　　仔细看，这样就不会出现报错吧。

　　报错：Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘default’

　　第一错误解决了，但随之而来的是控制台又抛出了第二个错误：

　　现在我来说说我的，目标JS文件中没有default导出，因此，我的JS文件就是这样：

　　function Rotation() {
　　let lbt = document.querySelectorAll('.zh-lbt');
　　for (let i = 0; i < lbt.length; i++) {
　　let lbtNum = Number(lbt[i].getAttribute('num'))||1
　　console.log(lbtNum);
　　}
　　}
　　export {Rotation};

　　常规来说没啥问题，export default和export只是暴露目标数有区别，因此不会是语法报错，是不是我的引入出现问题，随之做出下来改变

　　<script type="module">
　　import Rotation from '../js/ui.js'
　　Rotation();
　　</script>

　　加了一个大括号{}，修改为了

　　<script type="module">
　　import {Rotation} from '../js/ui.js'
　　Rotation();
　　</script>

　　发现果然控制台没有报错，并出现了结果

　　这个问题我认为其原因是export语法可以向外暴露多个目标，所以在引入时需要通过“{}”以对象经行引入，export default只能向外暴露一个，所以可以不用写{}。

　　可却不是。

　　在改为export default后，才发现export default在引入时，不能加{}，否则会报错。

　　export default{
　　Rotation:function () {
　　let lbt = document.querySelectorAll('.zh-lbt');
　　for (let i = 0; i < lbt.length; i++) {
　　let lbtNum = Number(lbt[i].getAttribute('num'))||1
　　console.log(lbtNum);
　　}
　　}
　　}

　　<script type="module">
　　import {Rotation} from '../js/ui.js'
　　Rotation.Rotation();
　　</script>

　　此时控制台会报错

　　同理此时只要去掉“{}”，就不会报错了，并能正确打印上面的结果。

欢迎大家关注更多精彩内容！

专线服务私有云 js import解决方案如何使用javascript javascript如何使用使用Javascript和DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/130288.html

ES6新特性总结一

摘要：一旦声明，常量的值不能被改变。顶层对象的属性顶层对象，浏览器中指的是对象，在中指的是对象。中新增了两个命令和，命令用于暴露出模块对外的接口，而则用于输入某一模块。 1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 const关键字 const声明一个只读的常量。一旦声明...

MarvinZhang 2019-08-26 11:48 评论0 收藏0
Javascript ES6学习

摘要：以下简称是语言的下一代标准。因为当前版本的是在年发布的，所以又称。命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。需要特别注意的是，命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。最常用的ES6...

gclove 2019-08-20 14:46 评论0 收藏0
很全很全的JavaScript的模块讲解

摘要：该模块实现方案主要包含与这两个关键字，其允许某个模块对外暴露部分接口并且由其他模块导入使用。由于在服务端的流行，的模块形式被不正确地称为。以上所描述的模块载入机制均定义在中。最近一直在搞基础的东西，弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此篇文章的地址：JavaScript的模块基础笔记...

lufficc 2019-08-22 11:20 评论0 收藏0
2020年如何写一个现代的JavaScript库

摘要：我写过一些开源项目，在开源方面有一些经验，最近开到了阮老师的微博，深有感触，现在一个开源项目涉及的东西确实挺多的，特别是对于新手来说非常不友好最近我写了一个，旨在从多方面快速帮大家搭建一个标准的库，本文将已为例，介绍写一个开源库的知识我写过一些开源项目，在开源方面有一些经验，最近开到了阮老师的微博，深有感触，现在一个开源项目涉及的东西确实挺多的，特别是对于新手来说非常不友好 show...

joyqi 2019-08-23 12:14 评论0 收藏0
ES6之路之模块详解

摘要：例如我们导入模块，可以这么导入桃翁欢迎关注公众号前端桃园报错不能定义相同名字变量报错，不能重新赋值小猪可以看到导入绑定这里不理解绑定，文章后面会解释时，形式类似于对象解构，但实际上并无关联。欢迎访问个人站点简介何为模块一个模块只不过是一个写在文件中的 JavaScript 代码块。模块中的函数或变量不可用，除非模块文件导出它们。简单地说，这些模块可以帮助你在你的模块中编写...

huashiou 2019-08-22 17:13 评论0 收藏0