12 es6 模块化,相关语法

第一种,导出

         <!--a.js-->
            必须有变量名
            export let name = 'mike';
            export const abc = "abc";
            export function test () {};
            export class Node {};

第二种,导出

            let name = 'mike';
            const abc = "abc";
            function test () {};
            class Node {};
            export {name, abc, test, Node}

相应的导入

         <!--main.js-->
            import {name,abc,test,node} from "./a.js"

导入的变量只可读?

         <!--main.js-->
            import {name,abc,test,node} from "./a.js"
          console.log(name) / mike
          name = "peter" / 报错

导出时重命名

            let name = 'mike';
            const abc = "abc";
            function test () {};
            class Node {};
            export {name as sex, abc, test, Node}

导入时重命名

         <!--main.js-->
            import {name as sex,abc,test,node} from "./a.js"
          console.log(name) / 报错
          console.log(sex)/  'mike'

设置默认导出

        / 必须是变量
          export let name = 'mike';
            export const abc = "abc";
            export function test () {};
            export class Node {};
            /跟上面的export 不冲突
            / 可以是匿名的, 可以是原始值,
          / 只能有一个
            export default function () {
                console.log("default")
            }
            

相应导入

import {name as aa, abc, test , Node} from "./a.js";
/ 接收时定义变量
import fn from "./a.js";

console.log(aa);

fn();

第二种默认导出

           let name = 'mike';
             const abc = "abc";
             function test () {};
             class Node {};
            
            export {name as default, abc, test, Node};

对应的导入

import {abc, test , Node} from "./a.js";

import name from "./a.js";


console.log(name);

导入整个模块

import * as module from "./a.js";


console.log(module);
console.log(module.abc);/abc

image.png