關於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的兩個報錯解決的文章就介紹到這瞭,更多相關JS使用export和import報錯內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS中ESModule和commonjs介紹及使用區別
- 簡單聊聊Js中的常見錯誤類型
- JavaScript中require和import的區別詳解
- JavaScript ES6 Module模塊詳解
- JS中 querySelector 與 getElementById 方法區別