ES6中模块导入导出的不同的方式

58 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- script标签里面一定要写type="module" -->
    <script type="module">
        // 打开不要直接打开,要用open with live server
        // 第一种导入方式
        import aaa from "./index.js";
        //   第二种导入方式,加上{}
        import { bbb } from "./index.js";
        //   第三种导入方式
        import { ccc } from "./index.js";
        console.log(ccc);
        //   导入第五种的导出
        import { d } from "./index.js";
      //   批量导入
      import * as obj from "./index.js"
    // 导入以后,如果要获取,就写成obj.a  obj.b obj.c
    </script>
  </body>
</html>

// 第一种导出方式,export default
const aaa = 123

export default aaa;
// 第二种导出方式,不用提前定义,直接导出声明或者语句
export const bbb = 444;
// 第三种导出方式,加上{}
const ccc = 555
export {ccc};
// 第五种导出方式
const ddd = 666
export{ ddd as d}