了解es6的模块，es Module

我们知道，直接引入script标签后，就可以直接全局访问这个script上的变量或方法，如果有多个js文件引入，就容易导致命名冲突。而在es6中新增了一种模块化规范ES Module,就可以根据我们的开发需求，需要什么，就导入什么，不会导致命名冲突问题。

vue中js的导入

• 在vue中，一般使用的js导入都是通过import导入，export{}和export default导出的方式引入js

// a.js中导出
export function fns() {
   console.log('export导出');
}

// b.js中导入
import {fns} from './a.js'
fns()    // export导出

我们都知道vue的js是使用的es6的模块导入，但是这个ESM到底是有什么特性？

ESM（ES Module）

es Module是es6最新出的一个模块化规范。相对于AMD规范，它有了更加严谨的语法标准，使用更加便捷，并且现在大多浏览器都已经支持该特性。

基本特性

• 在script标签中使用这个es Module

<script type='module'>
 function fns() {
      console.log(this);
   }
   fns()  // undefined
</script>

<script>
 function fns() {
      console.log(this);
   }
   fns()  // window
</script>

<script>
 'use strict'
 function fns() {
      console.log(this);
   }
   fns()  // undefined
</script>

由上述代码可知

• 在script标签中直接使用type='module'，那么这个script就是一个es module的模块
• 每个es module模块中，都会自动采用严格模式'use strict'
• 使用普通script标签打印this，this就是window.在es模块中,this就是undefined，所以普通的script标签都是全局作用域的，而每个es模块都有独立的私有作用域，很好的解决了命名冲突问题

• ESM的script脚本会相对与普通的script脚本会延迟执行

<script type="module">
   function fns() {
      console.log(this);
   }
   fns()
</script>
<script>
   function fns() {
      console.log(this);
   }
   fns()
</script>
// 会先打印出`window`，后打印出`undefined`

ESM通过CORS去请求外部JS模块

• ES Module是通过跨域的方式请求外部js模块，所以请求的该js模块必须是支持跨域的，否则会报错.

// app.js
let number = 123;
export {number} 

// useModule.html
<script type="module">
   import {number} from './esmodel.js'
   console.log(number);  // 报错跨域
</script>

• 需要通过Live Server方式访问，才能打印出访问结果