ES6中模块加载出现的问题

1、如何在浏览器中import模块

在使用模块加载时不同浏览器有不同的行为

使用 import 加载模块时，需要把script标签的type属性改为module。此时Firefox浏览器支持import，但Chrome浏览器仍然不支持。

<script type="module" src="src/importDemo.js"></script>

//export.js里面的代码，export.js文件无需在html中引入
let a = 123;
export {a};

//importDemo.js里面的代码
import {a} from './22Module.js'
console.log('module',a);

//　　或者内联script代码也可以
<script type="module">
    import {a} from './src/22Module.js'
    console.log(a);
</script>

Chrome浏览器要想支持import，要放在服务器里使用，或者使用webpack+babel。我只尝试了使用phpstudy建立一个本地服务器的方式，是可以执行的，但是此时有些代码在谷歌浏览器中显示跟在火狐浏览器显示的不太一样，甚至会出现谷歌浏览器不支持某些语句的情况。

使用webpack让浏览器支持import的方法：

（1）安装webpack：npm install webpack -g　（2）编译：webpack ./src/moudle.js  ./dist/module.js　　（3）改写html，使得连接dist文件夹上的脚本文件

1.1、import模块时需不需要后缀

浏览器在解析 import 语句时是需要后缀的，更确切地说，浏览器认 import 后面这个字符串为一个 URL 地址，所以原生解析JS在 import 模块时必须要使用后缀 .js ，注意路径也需要，即使是相同目录下也要加上 ./ 才行。

在使用打包工具比如webpack时， import 后面到底要不要后缀，全凭工具自己定义规则。