使用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测试了一下，完美😋