es6中export和export default的区别

es6中export和export default的区别

• export与export default均可用于导出常量、函数、文件、模块

• 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

• 在一个文件或模块中，export、import可以有多个，export default仅有一个

• 通过export方式导出，在导入时要加{ }，export default则不需要
• 其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

可以用最新的webpack去测试，最新的webpack已经内置支持了es6的模块语法。

webpack.config.js

const pathlib=require('path');

module.exports={
  mode: 'development',
  entry:'./js/main',
  output:{
    path:pathlib.resolve('dest'),
    filename:'bundle.js'
  }
}

js/main.js

import {fn} from './a';
import b from './b';

console.log(`a的值是${fn}`);
console.log(`b的值是${b}`);

js/a.js

function fn(){
  return {
    a:1000,
    age:21111111
  }
}

export {fn};

js/b.js

export default {
  name:'bbbbbbbbb',
  age:122222222222
}