关于JavaScript使用export和import的两个报错解决
更新时间：2022年07月07日 16:55:17 作者：buzhimingxiaobai
说来惭愧es6写了这么久,连最基本的export和import都没搞明白,下面这篇文章主要给大家介绍了关于JavaScript使用export和import的两个报错的解决方法,需要的朋友可以参考下
前言
作为一个前端小白，最近在学习使用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>
此时控制台会报错
同理此时只要去掉“{}”，就不会报错了，并能正确打印上面的结果。
总结
到此这篇关于JavaScript使用export和import的两个报错解决的文章就介绍到这了,更多相关JS使用export和import报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了小程序异步问题之多个网络请求依次执行并依次收集请求结果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家详细介绍了JS实现页面数据无限加载,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JavaScript console的使用方法,结合实例形式分析了JavaScript console的使用方法与操作注意事项,需要的朋友可以参考下2020-04-04
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧2017-09-09
数组的concat()方法想必大家比不陌生吧，在本文为大家介绍下javascript中数组的concat()方法的具体使用，感兴趣的朋友可以参考下2013-12-12
JavaScript中? ?、??=、?.和 ||的区别浅析
在 JS 中,?? 运算符被称为非空运算符,下面这篇文章主要给大家介绍了关于JavaScript中? ?、??=、?.和 ||区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了总结JavaScript中布尔操作符||与&&的使用技巧,是JS入门学习中的基础知识,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了Javasript设计模式之链式调用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要给大家介绍了关于webpack优化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了js设置默认时间跨度过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论