Webpack前置：ES6模块化的ES Module

ES Module的特性

自动采用严格模式，忽略 'use strict'
每个 ESM 模块都是独立的私有作用域
ESM 是通过 CORS 去请求外部JS模块
ESM 的script标签会自动延迟执行脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 通过给scrpt标签添加type = module 的属性，就可以用 ES Module 的标准执行其中的JS 代码 -->
    <script type="module">
        console.log('this is server')
    </script>

    <!--  1.ESM 自动采用严格模式，忽略 'use strict' -->
    <script type="module">
        //正常情况打印的this，是window对象
        console.log(this) //undefined
    </script>   

    <!--  2.每个 module 都是运行在单独的私有作用域中 -->
    <!--  这个特性可以让我们不用担心在设置全局变量时会造成全局作用域污染的情况 -->
    <script type="module">
        var foo = 100;
        console.log(foo) //输出100
    </script>   
    <script type="module">
        console.log(foo) //报错：foo is not defined,因为每个 module 都是私有作用域
    </script>  


    <!--  3.ESM 是通过 CORS 的方式请求外部 JS 模块的 -->
    <!-- 如果引用了不允许CORS的js文件，会报跨域问题 -->
    <!-- Access to script at 'https://libs.baidu.com/jquery/2.0.0/jquery.min.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. -->
    <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   
    
    <!--  4.ESM 会自动的延迟执行脚本 类似于 defer属性 -->
    <!-- 正常来讲，浏览器会对js脚本立即执行，即在页面渲染途中遇到js脚本会先等待js脚本执行完成后，才继续渲染界面。而加了 module 后，会先渲染完成页面后在执行module里面的js脚本 -->
    <script type="module" src="alert.js"></script>

</body>
</html>

ES Module的导入导出

//export.js

var name = "foo module";
function hello(){
    console.log(hello)
}

//导出多个
export {  hello, name}

//导出重命名，导入的时候需要导入重命名后的名称
export{
    name as fooName
}

//使用default导出
//在使用default导出的时候，那么导入的时候必须重命名
var defaultName = "default module"
export default defaultName

//导出对象字面量。。******主要区别于 export {} 这个语法与 解构的语法: var obj = { name,age }的区别.
//export {} 和 import{} 是一个固定的语法，不会解构
var personName = 'jack'
var persionAge = 18
export default {personName, persionAge}

//import.js

import { hello } from './test2.js'
console.log('test2-app  ',hello)

import { fooName } from './test2.js'
console.log('test2-app  ',fooName)

//导入default时，可以直接使用变量名接受了。等价于 import default as defaultName from './test2.js'
import defaultName from './test2.js'

//这个会报错，import {} 不会解构，请注意
import {personName, persionAge}  from './test2.js'


//************* 
//************* 
//************* 
//************* 导入的成员是一个只读的成员、

导入的模块成员是只读的

导入的模块成员是只读的！！！！！！！！！！

只需要执行模块而不提取成员

import {} from './export.js'
//简写
import './export.js'

提取所有成员

//如果需要使用导出模块导出的所有成员
import * from './export.js'

//这个会将导入的所有成员都当成 对象 mod 的一个属性
import * as mod from './export.js'

动态载入模块

//需要动态载入模块的时候
//import ('./export.js') 这个语法会异步的加载一个模块，并返回一个Promise
import ('./export.js').then(function(module) {
	//导入模块的所有成员都会成为 module 的一个成员属性
	console.log(module)
})

ES Module的兼容性问题

可以使用插件进行兼容ES Module，因为ES Module是ES6才提出的新特性，在这之前的浏览器并不支持。

但是这样做，性能比较差。

//导入以下三个插件，就可以兼容大部分的ES module特性
//他们的原理就是先读取模块的js文件，然后重新转换一次
<script src="https://unpkg.com/promise-polyfilla8.1.3/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/browser-es-module-loaderq0.4.1/dist/babel-browser-build.js"></script>
<script src="https://unpkg.com/browser-es-module-loader0.browser-es-module-loader.js"></script> 

<script type="module">
    import f foo  from './export.js'
    console.log(foo)
</script>



//还有一个script 属性 nomod 可以让不支持ES Module的浏览器不执行该脚本
//可以结合上面的脚本使用，达到在支持ES Module的浏览器上不加载，再不支持的浏览器上加载的效果
<script nomod>
	//如果浏览器不支持ES module，那么就不会执行这个alrt()
	alert('hello')
</script>

内容均来源：

【「前端工程化」之 Webpack 原理与实践（彻底搞懂吃透 Webpack）汪磊原版】 https://www.bilibili.com/video/BV1kP41177wp/?p=18&share_source=copy_web&vd_source=1f198831916492d5b63ed8dd057d8de4