淺析node中怎麼使用import語法-js教程-PHP中文網

淺析node中怎麼使用import語法

青灯夜游

發布： 2023-03-21 18:53:22

轉載

3747 人瀏覽過

node.js支援import語法，很簡單一個知識點，但卻能提醒我們從知識迷思裡走出來，多關注外邊的知識世界，不斷打開自己的知識邊界。

淺析node中怎麼使用import語法

js模組化

前端主流模組化規範，目前有以下幾種：

#CommonJS，Node.js提出的規範
ECMAScript Module，ESM，由ECMAScript組織提出的JavaScript標準規範
已淘汰的有：CMD、AMD等，再就綜合體UMD（支援各種規範的集合體）

因此，主流有兩種規範CommonJS和ESM兩種規範，但是由於Node.js不支持ESM規範，導致很多時候我們的專案裡面並存兩種規範的程式碼，從而出現下面這種情況：

// 在node端执行构建的时候
const _ = require(&#39;loadsh&#39;)

// 在浏览器端实现的时候
import _ from &#39;loadsh&#39;;

登入後複製

這樣子開發就很容易出現痛點，往往我們的解決方案是透過各種建置工具去解決，例如：webpack vite，尤其是我們在寫專案中寫node.js編譯腳本，常常需要切換。【相關教學推薦：nodejs影片教學、程式設計教學】

#但是從Node.js V14 版本後，它開始支援ESM規格啦，你可以直接在Node.js中使用import export等語法了，終於等到這一天?。

PS: 其實早在Node.js V8.5版本就已經加入該特性了，只不過一直需要透過全域變數–experimental-modules去開啟這一特性，由於不穩定性大多數項目都沒有開啟，不過自從16 後，我們就可以大膽放心在專案中使用了，不過一些古老的專案建議暫時不用開啟。

怎麼使用

我們先從官網上去看相關使用說明：

Node.js 有兩個模組規格：CommonJS模組規範和ECMAScript模組規範開發者可以透過.mjs 檔案副檔名、package.json中設定type=module或node xxx.js --input-type 標誌告訴Node.js 使用ECMAScript規格去執行程式碼。如果沒這些設置，Node.js 將使用 CommonJS 去執行。 Node.js Modules: ECMAScript modules

透過上述我們就可以知道幾個使用方式：

將檔案後綴改為.mjs，node.js載入的時候自動會用ESM規格
在專案中package.json新增配置項目"type":"module"，那麼整個專案中的.js檔案都會依照ESM規格去執行
##增加執行參數
--input-type也可以實現相同效果

各種使用方式

#1、常規方式：

import _ from &#39;lodash&#39;;

import { readFile } from &#39;fs&#39;;

import Demo from &#39;./Demo.mjs&#39;; // 绝对路径或相对路径都可以

export readFile;
export default readFile;

登入後複製

2、帶參數的使用：

// 由于参数不同， 这个会让`foo.mjs`被加载两次，而不会利用缓存中的`foo.mjs`
import &#39;./foo.mjs?query=1&#39;; // loads ./foo.mjs with query of "?query=1"
import &#39;./foo.mjs?query=2&#39;; // loads ./foo.mjs with query of "?query=2"

登入後複製

3、支援

data:格式URL的形式

import &#39;data:text/javascript,console.log("hello!");&#39;; // text/javascript 会将后面的内容当成js模块
import { test } from &#39;data:text/javascript,function test(){console.log("test")};export {test};&#39;; // 这里我们是不是扩宽思路，直接加载在线js呢？

import _ from &#39;data:application/json,"world!"&#39; assert { type: &#39;json&#39; }; // application/json 则是json

// application/wasm for Wasm

登入後複製

4、assert斷言(實驗特性) 將檔案強制載入為某種格式內容，如：

json javascript webassembly等

import fooData from &#39;./foo.json&#39; assert { type: &#39;json&#39; };

登入後複製

5、載入commonjs規格模組

當然也肯定支援載入commonjs規範的模組，用法如下：

import { default as cjs } from &#39;cjs&#39;; // module.exports 导出
import cjsSugar from &#39;cjs&#39;; // module.exports
import * as m from &#39;cjs&#39;;

登入後複製

6、import() 非同步導入這種用法就很正常，不需要即時加載，等到需要用的時候再加載

const { default: barData } =
  await import(&#39;./bar.json&#39;, { assert: { type: &#39;json&#39; } });

登入後複製

7、支持從http/https引入(實驗特性)

目前屬於實驗特性，有限制，例如：

import worker_threads from &#39;node:worker_threads&#39;;
import { configure, resize } from &#39;https://example.com/imagelib.mjs&#39;;
configure({ worker_threads });

登入後複製

##限制唯一的限制：當開啟ESM規格後，你只允許填入

import

或export，不允許使用require或module.exports，會報一下錯誤:

const a  = require(&#39;a&#39;)
           ^
ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///Users/borfyqiu/Desktop/study/github/qiubohong.github.io/code/demo-rollup/test.mjs:4:12
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

登入後複製

總結
其實這個也不算是冷門知識，只要稍微對Node.js有做持續關注，基本上都可以了解該特性。 
但身為一個不關注的人，很容易就陷入自己的知識迷思，會一直認為Node.js不支援ESM規範，甚至會吐槽Node.js為什麼不支援呢？ 
所以這裡有一句話需要提醒自己－ 【書山無路勤為徑，學海無涯苦作舟】。 
更多node相關知識，請造訪：
nodejs 教學！ 
以上是淺析node中怎麼使用import語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！