關(guān)于JavaScript使用export和import的兩個報錯解決
前言
作為一個前端小白,最近在學(xué)習(xí)使用JavaScript中的export和import,遇到了兩個報錯,特地記錄下來。
報錯: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ā)生解析錯誤,需要在script標(biāo)簽中加入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’
在解決上面的第一個報錯之后,控制臺又拋出了第二個錯誤:
是說我的目標(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)該有語法報錯,所以我想可能是引入時出現(xiàn)了問題,于是我將
<script type="module"> import Rotation from '../js/ui.js' Rotation(); </script>
加了一個大括號{},修改為了
<script type="module"> import {Rotation} from '../js/ui.js' Rotation(); </script>
發(fā)現(xiàn)果然控制臺沒有報錯,并出現(xiàn)了結(jié)果
這個問題我認(rèn)為其原因是export語法可以向外暴露多個目標(biāo),所以在引入時需要通過“{}”以對象經(jīng)行引入,export default只能向外暴露一個,所以可以不用寫{}。
然而事實是我想錯了。
在改為export default后,才發(fā)現(xiàn)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>
此時控制臺會報錯
同理此時只要去掉“{}”,就不會報錯了,并能正確打印上面的結(jié)果。
總結(jié)
到此這篇關(guān)于JavaScript使用export和import的兩個報錯解決的文章就介紹到這了,更多相關(guān)JS使用export和import報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果
這篇文章主要介紹了textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果,需要的朋友可以參考下2014-05-05第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識
第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識,本文為大家JS require.js模塊化工具的最基本知識點,感興趣的小伙伴們可以參考一下2016-04-04JavaScript實現(xiàn)彈出子窗口并傳值給父窗口
這篇文章主要介紹了JavaScript實現(xiàn)彈出子窗口并傳值給父窗口,方法很簡單,這里推薦給大家,需要的朋友可以參考下2014-12-12javascript實現(xiàn)的字符串與十六進(jìn)制表示字符串相互轉(zhuǎn)換方法
這篇文章主要介紹了javascript實現(xiàn)的字符串與十六進(jìn)制表示字符串相互轉(zhuǎn)換方法,涉及javascript字符串轉(zhuǎn)換的相關(guān)技巧,在防止SQL注入和XSS中具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07JavaScript關(guān)鍵字this的使用方法詳解
與其他語言相比,函數(shù)的 this 關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同,此外,在嚴(yán)格模式和非嚴(yán)格模式之間也會有一些差別,本文就給大家講解一下JavaScript關(guān)鍵字中的this,需要的朋友可以參考下2023-08-08