ES6中模块加载出现的问题

Posted 2021-02-09 wenxuehai

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

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

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

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

<script type="module" src="src/importDemo.js"></script>
//下面是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建立一个本地服务器的方式，是可以执行的。

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

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

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