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報錯怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。