ES6模块的import和export用法总结

1.

export const clientBaseurl = "http://localhost:50501";

 

import {clientBaseurl} from "./common/global"

 

2.

const clientBaseurl = "http://localhost:50501";

export {clientBaseurl}

 

import {clientBaseurl} from "./common/global"

 

3.使用as起一个别名

const clientBaseurl = "http://localhost:50501";

export {clientBaseurl as a}

 

import {a} from "./common/global"

 

4.export default导出,export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名（import的时候可以随意命名）

export default只能导出一个，import的时候不需要加{}

 

const clientBaseurl = "http://localhost:50501";

export default clientBaseurl;

 

import clientBaseurl2 from "./common/global"

 

可以导出一个对象

const clientBaseurl = "http://localhost:50501";

export default {

clientBaseurl,

test: "test"

};

 

import global from "./common/global"

alert(global.clientBaseurl)

 

5.import "./common/global"

并不会引入任何外部变量，只是把global.js执行一遍

 

 

6.es6 的import只支持js，webpack可以结合cssloader支持import css文件

 

7.export default和export可以同时存在：

export var clientBaseurl = "http://localhost:50501";

var test = "test";

export default test;

 

8.export还可以这样导出多个：

let baseUrl = ''; 

let routerMode = 'hash';

let imgBaseUrl = '';

 

export {

    baseUrl,

    routerMode,

    imgBaseUrl,

}

 

import {routerMode} from './config/env'