js中require和import的區別

當前端應用越來越復雜時，我們想要將代碼分割成不同的模塊，便於復用、按需加載等。require 和 import 分別是不同模塊化規范下引入模塊的語句，下文將介紹這兩種方式的不同之處。

 

1. 出現的時間、地點不同

	年份	出處
require/exports	2009	Commonjs
import/export	2015	ECMAScript2015（ES6）

Commonjs 模塊化方案 require/exports 是為服務器端開發設計的。服務器模塊系統同步讀取模塊文件內容，編譯執行后得到模塊接口。（Node.js 是 CommonJS 規范的實現）

在瀏覽器端，因為其異步加載腳本文件的特性，CommonJS 規范無法正常加載。所以出現了 RequireJS、SeaJS（兼容 CommonJS ）為瀏覽器設計的模塊化方案。直到 2015 年，ES6 官方發布了模塊化方案 import/export。

 

2. require/exports 是運行時動態加載，import/export 是靜態編譯

CommonJS 加載的是一個對象（即 module.exports 屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。- 阮一峰  

 

3. require/exports 輸出的是一個值的拷貝，import/export 模塊輸出的是值的引用

若兩個文件同時引用一個模塊，改變模塊內的值時，require引入的模塊內的值不會改變，而import引入的模塊內的值會改變。

 

4. 用法不一致

require/exports 的用法：

const fs = require('fs') exports.fs = fs module.exports = fs

import/export 的寫法：
import fs from 'fs'

import {default as fs} from 'fs' import * as fs from 'fs' import {readFile} from 'fs' import {readFile as read} from 'fs' import fs, {readFile} from 'fs' export default fs export const fs export function readFile export {readFile, read} export * from 'fs'

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

5. require 和 import 支持情況

	require/exports	import/export
Node.js	所有版本	Node 9.0+（啟動需加上 flag --experimental-modules） Node 13.2+（直接啟動）
Chrome	不支持	61+
Firefox	不支持	60+
Safari	不支持	10.1+
Edge	不支持	16+

原生瀏覽器不支持 require/imports，可使用支持 CommonJS 模塊規范的打包工具 Browsersify、webpack 等打包代碼。

import/export 在瀏覽器中無法直接使用，我們需要在引入模塊的 <script> 元素上添加type="module屬性。

即使 Node.js 13.2+ 已經支持 import/export，Node.js官方不建議在正式環境使用，目前可以使用 babel 將 ES6 的模塊系統編譯成 CommonJS 規范（注意：語法一樣，但具體實現還 是require/exports）。