前端web模块化开发之ESModules

模块化标准规范

前端模块化规范经过不断的迭代更新，目前算是统一成了NodeJS环境下的CommonJS和浏览器环境下的ES Modules

ES Modules是ECMAScript 2015(ES6)才出现的标准，所有其中必然是存在各种各样的兼容性问题，那么我们就不建议使用ES Modules?不，当然不是，经过webpack等一系列打包工具的流行，ES Modules现在已经得到普及，可以说是最主流的前端模块化方案了，相比于AMD这社区提出来开发的规范，ES Modules是语言层面实现的模块化，更加完善，也得到绝大多数浏览器的支持

ES Modules在浏览器环境下的使用

浏览器环境下使用ES Modules，可以通过在script标签中加入`type="module"`的方式来使这个script标签中的内容成为一个模块，可以以ES Module的标准执行其中的代码

```html
<script type="module">
    console.log("this is a es module")
</script>
```

ES Modules基础特性

  1. 自动采用严格模式，忽略'use strict'

  2. 每个ES Module 都是运行在单独的私有作用域中,在module1中定义的变量不能直接在module2中使用，需要通过导出和导入操作，这样做的好处是不用但心模块中的变量在全局作用域中的污染

  3. ESM是通过CORS的方式请求外部JS模块的，不支持CORS的路径是不能访问的，会报跨域错误

    <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    上面引入的外部文件是不支持CORS的，所有浏览器会报如下信息,提示产生跨域：

    支持CORS的路径是不会报出此错误的：

    <script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>

    在浏览器控制台的Sources中是可以找到此引入的：

    因为CORS不支持文件的方式访问，所以要在http server环境下访问,这个内容就不再过多赘述了，因为在实际开发中肯定都是在http server环境下进行开发的

  4. ESM的Script标签会自动延迟执行脚本，等同于Scrip标签中deffer属性，这样会使模块在页面加载完成后才会执行

posted @ 2021-07-02 14:30  MissSage  阅读(237)  评论(0)  编辑  收藏  举报