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'