ES module学习

ES module特性：

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

type=“module” 和defer

<script src="./main.js" type="module"></script>
作用同
<script src="./main.js" defer ></script>
/表示不是module的情况下引用
<script nomodule=""></script>

ES Module模块的导入和导出

Module.js

var msg = "信息";
// 导出方式
function getName() {
  console.log("function getName");
}
var name = "好好name";
var eat = "西红柿";
var className = "二年级";
export {
  name,
  getName,
  eat as food,
  className,
  // className as default
};

export var age = "18";
export function getAge(newAge) {
  console.log("function getAge", newAge);
}
export default msg;

testModule.js

alert("哈哈哈");
import {
  name,
  age,
  getAge,
  getName,
  food,
  className,
  //   default as className,
} from "./module.js";
import msg from "./module.js";
console.log("name is:", name);
console.log("age is:", age);
console.log("getAge():", getAge(3));
console.log("getName():", getName());
console.log("food is:", food);
console.log("className is:", className);
console.log("msg is:", msg);

// 也可以默认导出对象
var obj = {
    name,
    age
}
//全局只能有一个默认导出的
export default obj;

易错点：

1.export { 内容 }和import { 内容 }只是个导出格式，并不是导出个对象
2.导出的是成员的引用
3.导入的内容并不能被修改，为只读状态

在es module中：
1.引入文件时候必须写全文件名称，而commonjs不需要
2.引入某个文件下的index.js文件不能只引入到文件夹，如’./utils’,而应该为’./utils/index.js’
3.网页中可以直接引入文件’app.js’,而 es module和commonjs不能以字母开头，否则会认为是第三方内容，形式应该是’./app.js’等相对路径或者绝对路径及完整url
4.只加载模块，不引入内容可以使用

5.内容较多

6.Import只能在最顶层，如果有条件限制加载，可以采用动态加载

7.提取默认成员（命名随意）

Polyfill:解决部分浏览器不支持module的问题

Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。

  <!-- 引入poyfill解决 -->
    <script src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
    <script src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>

BAbel是js编译器,可以解析commonjs文件