龙空技术网

ES6 import/export用法

JavaScript前端 620

前言:

当前大家对“文件名的扩展名可以省略吗”可能比较关切,小伙伴们都需要学习一些“文件名的扩展名可以省略吗”的相关文章。那么小编同时在网上汇集了一些有关“文件名的扩展名可以省略吗””的相关资讯,希望你们能喜欢,我们快快来学习一下吧!

export正确用法

输出变量

export var name = 'Mark';
输出多个变量
var name = 'Mark'; var age = 18;export{name, age};//输出一个变量//export {name};
输出函数
export function setName(name){ name = 'Mark';}
输出别名
//export输出的变量就是在原文件中定义的名字,但可以使用as关键字设置别名export { name as v1, //允许使用不同名字输出两次 name as v2, setName as setNameV1}

export错误用法

//直接输出变量的值export 'Mark';//未使用中括号var name = 'Mark';export name;//export不要输出块作用域内的变量function(){ var name = 'Mark'; export {name};}

import用法

需要注意的是 import是在代码编辑阶段执行的

导入变量

//导入from相对路径与绝对路径都可以 .js文件后缀可以省略//导入的变量名必须与到处的名称保持一致import {name, age} from './config'; 
导入别名
import {name as otherName } from './config';
其他用法补充
import {name} from './config';import {age} from './config';//相同于import { name, age} from './config';export {setName, setAge};import * as setFn from '...';setFn.setName();setFn.setAge();//import会加载且仅加载一次导入的模块import './config';

export default用法

export default与export的主要区别是不需要知道导出的具体变量名与导入时不需要 { }

//export defaultexport default function crc32(){};import crc32 from 'crc32';//exportexport function crc32() {};import {crc32} from 'crc32';
export原理如下
var name = 'Mark';export default name; => export {name as default};import surname from '...'; => import {default as surname} from '..';
一个模块中只能有一个export default默认输出export 与 export default深入理解
//拆分import _ , {each, each as forEach} from '...';export default function(){};export function each(){};

export与import的复合写法

export name from '...';import {name} from '...';export {name};export {es6 as default} from '...';import {es6} from '...';export default es6;

作者:不吃早餐我就是Mark

链接:

来源:简书

简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

标签: #文件名的扩展名可以省略吗