Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Analyse der Verwendung der Importsyntax im Knoten

青灯夜游
Freigeben: 2023-03-21 18:53:22
nach vorne
3781 Leute haben es durchsucht

node.js unterstützt die Importsyntax, einen einfachen Wissenspunkt, der uns jedoch daran erinnern kann, aus Wissensmissverständnissen herauszukommen, der Außenwelt des Wissens mehr Aufmerksamkeit zu schenken und die Grenzen unseres eigenen Wissens ständig zu öffnen.

Eine kurze Analyse der Verwendung der Importsyntax im Knoten

js-Modularisierung

Die Mainstream-Front-End-Modularisierungsspezifikationen umfassen derzeit Folgendes:

  • CommonJS, die von Node.js vorgeschlagene Spezifikation
  • ECMAScript Module, ESM, die von ECMAScript vorgeschlagene JavaScript-Standardspezifikation Organisation
  • Diejenigen, die eliminiert wurden, sind: CMD, AMD usw. und dann das komplexe UMD (eine Sammlung, die verschiedene Spezifikationen unterstützt)

Daher gibt es zwei Mainstream-Spezifikationen CommonJS und ESMZwei Spezifikationen, aber da Node.js die ESM-Spezifikation nicht unterstützt, existiert der Code der beiden Spezifikationen in unseren Projekten häufig gleichzeitig, was zu der folgenden Situation führt: CommonJSESM两种规范,但是由于Node.js不支持ESM规范,导致很多时候我们的项目里面并存两种规范的代码,从而出现下面这种情况:

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

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

这样子开发就很容易出现痛点,往往我们的解决方案就是通过各种构建工具去解决,如: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=modulenode 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;
Nach dem Login kopieren

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"
Nach dem Login kopieren

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
Nach dem Login kopieren

4、assert断言(实验特性) 将文件强制加载为某种格式内容,如:json javascript webassembly

import fooData from './foo.json' assert { type: 'json' };
Nach dem Login kopieren

5、加载commonjs规范模块

当然肯定也支持加载commonjs规范的模块,用法如下:

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

6、import() 异步导入 这种用法就很正常,不需要实时加载,等到需要用的时候再加载

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

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 });
Nach dem Login kopieren

限制

唯一的限制:当开启ESM规范后,你只允许填写importexport,不允许使用requiremodule.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)
Nach dem Login kopieren
Gefällt mir: Es ist leicht, Schwachstellen in der Entwicklung zu haben, und oft besteht unsere Lösung darin, sie durch verschiedene Konstruktionstools zu lösen, wie zum Beispiel: webpack vite, insbesondere wenn wir Schreiben Sie den Knoten in das JS-Kompilierungsskript und müssen Sie häufig wechseln. [Empfohlene verwandte Tutorials: nodejs-Video-Tutorial

, Programmierunterricht]

Aber nach der Version V14+ von Node.j beginnt es, die ESM-Spezifikation zu unterstützen, Sie können es direkt in Node verwenden. js Verwenden Sie import export und andere Syntaxen. Warten Sie endlich auf diesen Tag?

PS: Tatsächlich wurde diese Funktion bereits in der Node.js-Version V8.5 hinzugefügt, aber es war schon immer notwendig, diese Funktion über die globale Variable –experimental-modules zu aktivieren. Aufgrund der hohen Instabilität wurden die meisten Projekte nicht aktiviert, aber seit 16+ können wir es bedenkenlos und sicher in Projekten verwenden. Es wird jedoch empfohlen, einige alte Projekte vorerst nicht zu aktivieren.

So verwenden Sie

Lesen Sie zunächst die entsprechenden Anweisungen auf der offiziellen Website:

Node.js verfügt über zwei Modulspezifikationen: CommonJS-Modulspezifikation und ECMAScript Code >Modulspezifikation Entwickler können <code>type=module oder node xxx.js --input über die Dateierweiterung <code>.mjs, package.json, festlegen. Das Flag type weist Node.js an, die ECMAScript-Spezifikation zum Ausführen von Code zu verwenden. Ohne diese Einstellungen verwendet Node.js CommonJS zur Ausführung. Node.js-Module: ECMAScript-Module🎜🎜
🎜Durch das Obige können wir verschiedene Verwendungsmethoden kennen:🎜
    🎜🎜 Ändern das Dateisuffix zu .mjs Wenn node.js geladen wird, wird automatisch die ESM-Spezifikation🎜🎜🎜🎜im Projekt package.json verwendet. code> Fügen Sie ein neues Konfigurationselement "type":"module" hinzu, dann werden alle .js-Dateien im gesamten Projekt gemäß der ESM-Spezifikation ausgeführt🎜🎜🎜🎜 Das Hinzufügen von Ausführungsparametern --input-type kann ebenfalls den gleichen Effekt erzielen🎜🎜🎜🎜🎜Verschiedene Verwendungsmethoden🎜🎜🎜1 . Konventionelle Methode: 🎜rrreee 🎜2. Verwendung mit Parametern: 🎜rrreee🎜3. Unterstützung des data:-Formats für die Behauptung 🎜rrreee🎜4. Erzwingen Sie das Laden der Datei in ein bestimmtes Format, wie zum Beispiel: json javascript webassembly usw.🎜rrreee🎜5. Laden Sie die commonjs-Spezifikation Modul🎜🎜Natürlich unterstützt es auch das Laden von CommonJS-Standardmodulen. Die Verwendung ist wie folgt: 🎜rrreee🎜6 Diese Art der Nutzung ist ganz normal. Es wird nicht in Echtzeit geladen. 🎜rrreee🎜Unterstützt den Import von http/https (experimentelle Funktion). Funktion mit Einschränkungen, wie zum Beispiel: 🎜🎜🎜Keine Unterstützung des http2/3-Protokolls 🎜🎜http-Protokoll kann nur für lokale IP-Adressen wie 127.0.0.1 verwendet werden 🎜🎜Cookie, Autorisierung und andere Informationen werden nicht übertragen und gesendet 🎜🎜Nur Die Remote-JS-Datei wird geladen und ausgeführt und nicht am Remote-Ende geladen. Abhängig von anderen Dateien Einzige Einschränkung: Wenn die ESM-Spezifikation aktiviert ist, dürfen Sie nur import oder export ausfüllen, require darf nicht verwendet werden oder module.exports, und es wird ein Fehler gemeldet: 🎜rrreee🎜🎜Zusammenfassung🎜🎜🎜Tatsächlich ist dies auch kein beliebtes Wissen, solange Sie Node ein wenig Aufmerksamkeit schenken. js, Sie können diese Funktion grundsätzlich verstehen. 🎜🎜Aber als jemand, der nicht aufpasst, verfällt man leicht in sein eigenes Missverständnis von Wissen. Sie werden immer denken, dass Node.js die ESM-Spezifikation nicht unterstützt, und Sie werden sich sogar darüber beschweren, warum Node.js dies nicht tut es unterstützen? 🎜🎜Hier ist also ein Satz, an den Sie sich erinnern müssen: [Es gibt keinen Weg im Berg der Bücher, und harte Arbeit ist der Weg, und das Meer des Lernens kennt keine Grenzen, und das Boot ist hart arbeiten]. 🎜🎜Weitere Informationen zu Knoten finden Sie unter: 🎜nodejs-Tutorial🎜! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der Importsyntax im Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!