ES6规范中的import和export踩坑

ES6规范中的import和export踩坑

各浏览器对ES6语法的支持

桌面端浏览器对ES2015的支持情况

• Chrome：51 版起便可以支持 97% 的 ES6 新特性。
• Firefox：53 版起便可以支持 97% 的 ES6 新特性。
• Safari：10 版起便可以支持 99% 的 ES6 新特性。
• IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

移动端浏览器对ES2015的支持情况

• iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
• Android：基本不支持 ES6 新特性（5.1 仅支持 25%）

服务器对ES2015的支持情况

• Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

import和export的用法

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）
index.html:

<script type="module">
  import {foo, num} from './test.js';

  console.log(num);
  console.log(foo());
</script>

test.js:

export const num = '123';
export function foo() { return '456';}

注意事项

注意:

1. 浏览器要选择兼容ES6的版本（上文有对照表）
2. 要使用ES6语法需要在script引用标签中加入 type=”module”来向浏览器声明要使用ES6语法。
3. type=”module” 默认不支持跨域，所以在本地浏览器不能使用import和export,需要搭建服务器环境。

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦