關於require和import，先明確一些基礎概念
1：require屬於commonjs(ES5)規範，import屬於ES6規範。
2：require/import 一般用於服務端(NodeJS)開發。 import由於是ES6規範，需要使用babel-loader轉換為require
3：瀏覽器中要使用require語法的話，需要引用requirejs外掛。 參考：http://www.nodeclass.com/articles/68336
4：require是執行時呼叫，import是編譯時呼叫。require是賦值過程，import是解構的過程。 通過以下示例可以看出區別：
counter.js

exports.count = 0
setTimeout(function () {
  console.log(`counter is ${++exports.count} in counter.js after 500ms`)
}, 500)

common.js

const {count} = require('./counter')
setTimeout(function () {
  console.log(`after 1s count is: ${count}`);
}, 1000)

執行: node common.js
結果如下圖，可以看出，require是copy了匯出的物件。

下面再用import的方式實現：
npm init
開啟新建的package.json，新增： "type": "module"

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "es6.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module"
}

counter.js

let count=0;
setTimeout(function () {
  console.log('count is', ++count, 'in counter.js after 500ms')
}, 500)

export {count};
 

es6.js

import {count} from './counter.js'
setTimeout(function () {
  console.log('count in es6 after 1s is', count)
}, 1000)

最後: node es6.js

結果如下圖，說明import沒有copy一個新的物件，只是將export的物件結構

5：常用的import、export方式
5.1 對於命名匯出的物件，可以使用as賦以別名，以避免重名

import {speak} from './cow.js'
import {speak} from './goat.js'	

使用as賦別名

import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'

5.2 名稱空間引入

import * as cow from './cow.js'
import * as goat from './goat.js'

cow.speak() // moo
goat.speak() // baa

參考：https://juejin.cn/post/6844903623273480200