12 es6 模块化,相关语法

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018

第一种,导出

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

第二种,导出

1
2
3
4
5
            let name = 'mike';
            const abc = "abc";
            function test () {};
            class Node {};
            export {name, abc, test, Node}

相应的导入

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

导入的变量只可读?

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

导出时重命名

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

导入时重命名

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

设置默认导出

1
2
3
4
5
6
7
8
9
10
11
12
13
        / 必须是变量
          export let name = 'mike';
            export const abc = "abc";
            export function test () {};
            export class Node {};
            /跟上面的export 不冲突
            / 可以是匿名的, 可以是原始值,
          / 只能有一个
            export default function () {
            	console.log("default")
            }
            

相应导入

1
2
3
4
5
6
7
import {name as aa, abc, test , Node} from "./a.js";
/ 接收时定义变量
import fn from "./a.js";

console.log(aa);

fn();

第二种默认导出

1
2
3
4
5
6
           let name = 'mike';
             const abc = "abc";
             function test () {};
             class Node {};
            
            export {name as default, abc, test, Node};

对应的导入

1
2
3
4
5
6
7
8
import {abc, test , Node} from "./a.js";

import name from "./a.js";


console.log(name);


导入整个模块

1
2
3
4
5
import * as module from "./a.js";


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

image.png