使用ES6的模塊編寫web頁面碰到的坑
昨天寫最近在做的web應用時,在web頁面的js文件中使用了模塊功能,這樣在html文件中只需要導入一個js就好了??
做完測試時發現,模塊導入時向服務器發送申請時,沒有後綴名!
但是如果加了後綴名的話,eslint就會提示代碼不規範。。
--------------------------------------------------------------------------這些是廢話--------------------------------------------------------------------------
谷歌了一下,發現完全看不懂大家在說什麽啊!什麽mime什麽二進制編碼判斷文件的。。
雖然我也有寫mime.mjs但是完全不知道怎麽做到通過文件的二進制編碼判斷文件類型啊!
當天已經不早了,故把別的不規範代碼修正後便未接著做下去。
今天跑去問了一個教web的老師、一個jsp老師,兩個老師給的答復一個是“為什麽要沒有後綴名呢,我們都用後綴名的啊”,另一個是“我不懂”
我的天啊,順便吐槽一句,我的學校給老師分配教職任務時,完全是亂分配的嘛,上學期的java老師這學期給別的班教安卓,這學期的jsp老師研究方向是大數據,安卓老師一副我不是很懂所以大家隨意的樣子??
--------------------------------------------------------------------------這些是廢話--------------------------------------------------------------------------
之後我想了一想,可以通過判斷文件夾名稱給文件添加後綴名
註:我的文件夾嵌套是
html
--css
--js
故可如此將就一下。
服務器端代碼如下:
// 不使用上傳功能且按後綴名分類文件的話這樣應該夠用了吧 // 為無後綴的請求添加後綴
// pathname是文件存放地址 if (pathname.indexOf(‘.‘) === -1) { // 臨時存儲倒數第一個反斜杠的位置 const tempCoordinate1 = pathname.lastIndexOf(‘\\‘); // 臨時存儲倒數第二個反斜杠的位置 const tempCoordinate2 = pathname.lastIndexOf(‘\\‘, tempCoordinate1 - 1);// 臨時存儲後綴名 const tempMime = pathname.substring(tempCoordinate2 + 1, tempCoordinate1); pathname = `${pathname}.${tempMime}`; }
這為其一
做好這個後我又接著使用eslint了,然後發現一個更坑的??
eslint提示‘Vue‘ is not defined
然後我嘗試導入vue,之後發現,我js文件夾中的vue文件,沒有使用export導出文件,翻看了一下官方文檔,雖然知道了npm包中的vue.esm.browser.js為瀏覽器中使用的js,但是接著向下翻就完全不懂其說的使用打包工具進行打包需要添加的屬性,我並不會使用打包工具啊!而且每次測試都要打包也太怪了吧!故又跑去谷歌,發現大家說的也是糊裏糊塗的。
在嘗試各種網上的方法後,我快要被搞得心態爆炸了,突然我的腦袋靈光一閃,何不去看一看這個vue.esm.browser.js文件寫的是什麽呢。跑去一看,好家夥,還真是使用ES6的模塊一個js文件,趕緊覆蓋了我原來的vue文件,使用eslint和web測試了一下,完美??
使用ES6的模塊編寫web頁面碰到的坑