前言

作為一個(gè)前端小白，最近在學(xué)習(xí)使用JavaScript中的export和import，遇到了兩個(gè)報(bào)錯(cuò)，特地記錄下來。

報(bào)錯(cuò)：Uncaught SyntaxError: Cannot use import statement outside a module

意思是說無法在module以外使用import，在網(wǎng)上進(jìn)行查閱之后才了解到，這是由于script標(biāo)簽?zāi)J(rèn)是使用JavaScript語言，使用ES6的語法會發(fā)生解析錯(cuò)誤，需要在script標(biāo)簽中加入type=“module”，具體如下：

<script type="module">
	import Rotation from '../js/ui.js'
	Rotation();
</script>

這樣就不會報(bào)錯(cuò)了。

報(bào)錯(cuò)：Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘default’

在解決上面的第一個(gè)報(bào)錯(cuò)之后，控制臺又拋出了第二個(gè)錯(cuò)誤：

是說我的目標(biāo)JS文件中沒有default導(dǎo)出，而我的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只是暴露目標(biāo)數(shù)有區(qū)別，不應(yīng)該有語法報(bào)錯(cuò)，所以我想可能是引入時(shí)出現(xiàn)了問題，于是我將

<script type="module">
   import Rotation from '../js/ui.js'
   Rotation();
</script>

加了一個(gè)大括號{}，修改為了

<script type="module">
    import {Rotation} from '../js/ui.js'
    Rotation();
</script>

發(fā)現(xiàn)果然控制臺沒有報(bào)錯(cuò)，并出現(xiàn)了結(jié)果

這個(gè)問題我認(rèn)為其原因是export語法可以向外暴露多個(gè)目標(biāo)，所以在引入時(shí)需要通過“{}”以對象經(jīng)行引入，export default只能向外暴露一個(gè)，所以可以不用寫{}。
然而事實(shí)是我想錯(cuò)了。

在改為export default后，才發(fā)現(xiàn)export default在引入時(shí)，不能加{}，否則會報(bào)錯(cuò)。

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>

此時(shí)控制臺會報(bào)錯(cuò)

同理此時(shí)只要去掉“{}”，就不會報(bào)錯(cuò)了，并能正確打印上面的結(jié)果。

總結(jié)

到此這篇關(guān)于JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)解決的文章就介紹到這了,更多相關(guān)JS使用export和import報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論