沐鳴註冊網站_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'

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)。

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8151