es6中export和export default的區別是什么

本篇內容主要講解“es6中export和export default的區別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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

js/b.js

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

到此，相信大家對“es6中export和export default的區別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！