Javascript实现浏览器模块化开发

浅浅的花香味﹌ 2023-06-08 04:39 4阅读 0赞

# 概述 #

js使用import实现模块化开始，对于大型项目开发来说非常有用，而且结构清晰，ES6就有相关的规范，现在不光node.js可以无阻使用，浏览器也可以原生支持了。现就简单使用及一些部署问题作一归纳总结。

# 上手 #

先直接上手写吧，然后再说一些遇到的问题。

## 导出的文件 ##

utils.js/utils.mjs

export function timestamp() { 
         return new Date().getTime()
    }
    export default {  config:1}

export default只能出现一次

## 导入的文件 ##

main.js

import configuration, {  timestamp } from './utils.js'

> 注意： 导入必须补全后缀

现在我们就可以愉快地码代码了！

# 问题 #

## 引入问题 ##

在引入 模块化开发的js文件时，必须声明类型为 **module**,不然会报错

Uncaught SyntaxError: Unexpected identifier

![在这里插入图片描述][20191016113045875.png]  
![在这里插入图片描述][20191016113318499.png]  
这样，浏览器就会将这个文件认为是ECMAScript模块。一般情况下 业界或者官方会将这种模块文件使用 **mjs** 命名。当然也可以使用**js**命名。

## 类型问题 ##

浏览器对于 import的文件类型非常严格，以nginx服务器为例，Nginx 会根据mime type定义的对应关系来告诉浏览器如何处理服务器传给浏览器的这个文件，一般默认default\_type application/octet-stream;会对未定义的文件设置为该类型。  
但是在模块化引入的时候必须精确，需要指定为 application/javescript 或者application/x-javescript.否则会报如下错误：

Failed to load module script: The server responded with a non-JavaScript MIME type ...

![在这里插入图片描述][20191016113927777.png]

### 解决办法 ###

需要配置nginx服务器的mime

找到nginx.conf ,如果有 include mime.types; 那就直接到该配置项下面找，如果没有 就找types\{\}  
在types 中 找到js文件的设置，以下两种方式都一样：

application/x-javascript              js mjs;

或者

application/x-javascript              js;
    application/x-javascript              mjs;

然后重启服务。

## 导入后缀问题 ##

一般我们在写import … from … 的时候会省略 .js后缀，如果是使用打包工具，这样是没问题的，但是如果是浏览器原生引用，就是出问题

import ... from './utils'

报错

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

![在这里插入图片描述][2019101611552550.png]  
这是因为浏览器在解析的时候认为 import 后面这个字符串为一个 URL 地址，但是响应的时候类型为“”text/html“”,不可执行，所以会报错

### 解决 ###

import 的时候补全后缀。

### 扩展，要不要加后缀 ###

如果项目是打包工具开发，其实浏览器最终加载的是打包后的bundle 这个文件，所以可以不用写，打包工具会根据自己的规则先找 .ts然后找.es .js这样来引入文件，如果是文件夹会默认找index.js，甚至会去node\_modules中去找。

如果是原生开发，浏览器原生引入，最好补全。

> 开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。  
> 微信号：multicode，欢迎交流！

[20191016113045875.png]: /images/20230531/0f0840af01844a429ab9760243984648.png
[20191016113318499.png]: /images/20230531/21151d49c649403180ec321ea8637bde.png
[20191016113927777.png]: /images/20230531/a731126c0c7d4279bb4dc6b855fe2204.png
[2019101611552550.png]: /images/20230531/63a318af9a8e4f758685cba4840d19c0.png