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

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

　　前言

　　本篇文章主要为大家叙述关于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>

　　此时控制台会报错

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

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

idc机房托管云服务器 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声明一个只读的常量。一旦声明，常量的值不能被改变。const声明一个变量，就必...

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

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。最常用的ES6特性 var,let,const区别 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arg...

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

...看的……）链接地址：Front-End-Basics 此篇文章的地址：JavaScript的模块基础笔记的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,可以watch,也可以star。正文开始 JavaScript的模块介绍模块通常是指编程语言所提供的代码组...

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

...，如果对这部分内容感兴趣，可以看我之前的一篇文章《JavaScript模块的前世今生》对于浏览器原生，预编译工具和node，不同环境中的模块化方案也不同；由于浏览器环境不能够解析第三方依赖，所以浏览器环境需要把依赖也进...

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

...点简介何为模块一个模块只不过是一个写在文件中的 JavaScript 代码块。模块中的函数或变量不可用，除非模块文件导出它们。简单地说，这些模块可以帮助你在你的模块中编写代码，并且只公开应该被你的代码的其他部分访...

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