亲宝软件园·资讯

展开

JS使用export和import报错

buzhimingxiaobai 人气:0

前言

作为一个前端小白,最近在学习使用JavaScript中的export和import,遇到了两个报错,特地记录下来。

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

报错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’

在解决上面的第一个报错之后,控制台又抛出了第二个错误:

报错: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>

此时控制台会报错

报错Uncaught SyntaxError: The requested module '../js/ui.js' does not provide an export named 'Rotation'

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

总结

加载全部内容

相关教程
猜你喜欢
用户评论