淺析node中怎麼使用import語法

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

js模組化

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

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

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

// 在node端执行构建的时候
const _ = require('loadsh')

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

這樣子開發就很容易出現痛點，往往我們的解決方案是透過各種建置工具去解決，例如：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 'lodash';

import { readFile } from 'fs';

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

export readFile;
export default readFile;

2、帶參數的使用：

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

3、支援

data:格式URL的形式

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

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

// application/wasm for Wasm

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

json javascript webassembly等

import fooData from './foo.json' assert { type: 'json' };

5、載入commonjs規格模組

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

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

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

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

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

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

不支援http2/3協定
• http協定只能用於127.0.0.1等本地ip位址
• Cookie、Authorization等資訊不會攜帶發送
• 只會載入執行遠端的js文件，而不會載入遠端依賴其他文件

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

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

import

或export，不允許使用require或module.exports，會報一下錯誤:<pre class="brush:js;toolbar:false;">const a = require(&amp;#39;a&amp;#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)</pre>

總結

其實這個也不算是冷門知識，只要稍微對Node.js有做持續關注，基本上都可以了解該特性。

但身為一個不關注的人，很容易就陷入自己的知識迷思，會一直認為Node.js不支援ESM規範，甚至會吐槽Node.js為什麼不支援呢？

所以這裡有一句話需要提醒自己－ 【書山無路勤為徑，學海無涯苦作舟】。

更多node相關知識，請造訪：

nodejs 教學

！

以上是淺析node中怎麼使用import語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！