概述

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

这样，浏览器就会将这个文件认为是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 ...

解决办法

需要配置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.

这是因为浏览器在解析的时候认为 import 后面这个字符串为一个 URL 地址，但是响应的时候类型为“”text/html“”,不可执行，所以会报错

解决

import 的时候补全后缀。

扩展，要不要加后缀

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

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

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

Javascript实现浏览器模块化开发相关推荐

JavaScript模块化开发技术概述
2019独角兽企业重金招聘Python工程师标准>>> 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应 ...
为什么JavaScript需要模块化开发？
为什么需要模块化开发? 随着代码复杂程度的提高, 项目也变得越来越难维护, JavaScript模块化也因此油然而生, 这应该是大家最熟悉的一种加载方式, 但是缺点也比较明显所有的模块都处于全局作 ...
前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
JavaScript 模块化开发入门
JS 为什么要模块化 JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性,为Web页面添加一些动画效果等,并不包含太多的高级语言的特性,此时通常直接在HTML页面中编写简单的 ...
JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁历史不是过去,历史正在上演,一切终究都会成为历史拥抱变化,面向未来延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
javascript模块化开发
一.什么是模块化开发将软件产品看作为一系列功能模块的组合通过特定的方式实现软件所需模块的划分.管理.加载二.模块化开发好处解决命名冲突问题添加命名空间YUI .EXTJS-可以从一定程度上解 ...

Javascript实现浏览器模块化开发

概述

上手