export，import，export default，import()区别

export 导出 可以是多个变量或者函数

// 写法一
// utils.js
export str = 'aaaa'
export str1 = 'bbbbb'

// index.js
import {str, str1} from './utils.js'


// 写法二
// utils.js
let str = 'aa'
let str1 = 'bb'

export {str, str1}
// index.js
import {str, str1} from './utils.js'

export default本质上是输出一个叫default的变量 只能是一个变量或者函数

// export default str = str编译以后是exports.default
export function ss() {
  console.log('ss')
}

export function aa() {
  console.log('aa')
}
// 编译以后是
exports.ss = ss;
exports.aa = aa;

import 是静态加载文件，可以提升，在所有js代码之前加载完成，不能再代码块中加载

foo()
import {foo} form './utils'
// 不报错 是因为提升了

import() 可以动态加载，可以在代码块中加载，实现按需加载，返回的是一个promise对象

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

　　按需加载：

if (a==='a') {
  import('./utils').then(...)
} else if (b==='b') {
  import('./utils1').then(...)
} else if (c==='c') {
  import('./utils2').then(...)  
}