node中如何使用import語法

這篇文章主要介紹了node中如何使用import語法的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇node中如何使用import語法文章都會有所收獲，下面我們一起來看看吧。

js模塊化

前端主流模塊化規(guī)范，目前有以下幾種：

• CommonJS， Node.js提出的規(guī)范

• ECMAScript Module，ESM，由ECMAScript組織提出的JavaScript標準規(guī)范

• 已淘汰的有：CMD、AMD等，再就綜合體UMD（支持各種規(guī)范的集合體）

因此，主流有兩種規(guī)范CommonJS和ESM兩種規(guī)范，但是由于Node.js不支持ESM規(guī)范，導致很多時候我們的項目里面并存兩種規(guī)范的代碼，從而出現(xiàn)下面這種情況：

// 在node端執(zhí)行構(gòu)建的時候
const _ = require('loadsh')

// 在瀏覽器端實現(xiàn)的時候
import _ from 'loadsh';

這樣子開發(fā)就很容易出現(xiàn)痛點，往往我們的解決方案就是通過各種構(gòu)建工具去解決，如：webpack vite，尤其是我們在寫項目中寫node.js編譯腳本，經(jīng)常需要切換?！鞠嚓P(guān)教程推薦：nodejs視頻教程、編程教學】

但是從Node.js V14+版本后，它開始支持ESM規(guī)范啦，你可以直接在Node.js中使用import export等語法了，終于等到這一天?。

PS: 其實早在Node.js V8.5版本就已經(jīng)加入該特性了，只不過一直需要通過全局變量–experimental-modules去開啟這一特性，由于不穩(wěn)定性大多數(shù)項目都沒有開啟，不過自從16+后，我們就可以大膽放心在項目中使用了，不過一些古老的項目建議暫時不用開啟。

怎么使用

我們先從官網(wǎng)上去看相關(guān)使用說明：

Node.js 有兩個模塊規(guī)范：CommonJS模塊規(guī)范 和 ECMAScript模塊規(guī)范 開發(fā)者可以通過 .mjs 文件擴展名、package.json中設(shè)置type=module或node xxx.js --input-type 標志告訴 Node.js 使用 ECMAScript規(guī)范去執(zhí)行代碼。 如果沒這些設(shè)置，Node.js 將使用 CommonJS 去執(zhí)行。Node.js Modules: ECMAScript modules

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

• 將文件后綴改為.mjs，node.js加載的時候自動會用ESM規(guī)范

• 在項目中package.json新增配置項"type":"module"，那么整個項目中的.js文件都會按照ESM規(guī)范去執(zhí)行

• 增加執(zhí)行參數(shù)--input-type也可以實現(xiàn)相同效果

各種使用方式

1、常規(guī)方式：

import _ from 'lodash';

import { readFile } from 'fs';

import Demo from './Demo.mjs'; // 絕對路徑或相對路徑都可以

export readFile;
export default readFile;

2、帶參數(shù)的使用：

// 由于參數(shù)不同， 這個會讓`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 會將后面的內(nèi)容當成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斷言(實驗特性) 將文件強制加載為某種格式內(nèi)容，如：json javascript webassembly等

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

5、加載commonjs規(guī)范模塊

當然肯定也支持加載commonjs規(guī)范的模塊，用法如下：

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協(xié)議

• http協(xié)議只能用于127.0.0.1等本地ip地址

• Cookie、Authorization等信息不會攜帶發(fā)送

• 只會加載執(zhí)行遠端的js文件，而不會加載遠端中依賴其他文件

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

限制

唯一的限制：當開啟ESM規(guī)范后，你只允許填寫import或export，不允許使用require或module.exports，會報一下錯誤:

const a  = require('a')
           ^
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)

關(guān)于“node中如何使用import語法”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“node中如何使用import語法”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。