vue开发技术h5前端开发

ES6模块的import和export用法总结

2019-10-08  本文已影响0人  手指乐

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

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

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'

上一篇下一篇

猜你喜欢

热点阅读