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

来源: https://www.ucloud.cn/yun/130288.html 作者: 3403771864 发布日期: 发布于2023-01-20 08:28

前言

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

　　此时控制台会报错

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

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