目次
まず、公式 Web サイトから関連する手順を読んでみましょう:
それでは、自分自身に思い出してもらいたい一文があります - [本の山に道はなく、勤勉が道であり、学びの海と船には制限がありません]はボートです]。
ホームページ ウェブフロントエンド jsチュートリアル ノードでインポート構文を使用する方法の簡単な分析

ノードでインポート構文を使用する方法の簡単な分析

Mar 21, 2023 pm 06:53 PM
nodejs​ node import

node.js は import 構文をサポートしています。これは単純な知識ポイントですが、知識の誤解をなくし、知識の外の世界にもっと注意を払い、自分自身の知識の境界を常に開くことを思い出させてくれます。

ノードでインポート構文を使用する方法の簡単な分析

#js モジュール化

現在主流のフロントエンドのモジュール化仕様には次のものが含まれています:

    CommonJS (Node.js によって提案された仕様)
  • ECMAScript Module、ESM (ECMAScript 組織によって提案された JavaScript 標準仕様)
  • 廃止されたものは、CMD、AMD などです。次に、複雑な UMD (さまざまな仕様の集合をサポート)
したがって、主流の仕様は

CommonJSESM の 2 つですが、Node.js ESM 標準では、プロジェクト内で 2 つの標準コードが共存することがよくあり、その結果、次のような状況が発生します:

// 在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 以降はプロジェクトで大胆に使用できるようになりましたが、一部の古いプロジェクトでは当面はオンにしないことを推奨しています。

使用方法

まず、公式 Web サイトから関連する手順を読んでみましょう:

Node.js には 2 つのモジュール仕様があります:
CommonJS

モジュール仕様とECMAScriptモジュール仕様 開発者は、.mjs ファイル拡張子 package.json を通じて type=module または node xxx.js --input-type# を設定できます。 # フラグは、コードを実行するために ECMAScript 仕様を使用するように Node.js に指示します。これらの設定がない場合、Node.js は実行に CommonJS を使用します。 Node.js モジュール: ECMAScript モジュール上記を通じて、いくつかの使用方法を知ることができます:

ファイルのサフィックスを # に変更します。 ##.mjs
    、node.js がロードされると、プロジェクト
  • package.json## の

    ESM 仕様

    が自動的に使用されます。 # 新しい構成項目
  • "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、アサーション アサーション (実験的な機能)

json

javascript

webassembly

など <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import fooData from &amp;#39;./foo.json&amp;#39; assert { type: &amp;#39;json&amp;#39; };</pre><div class="contentsignin">ログイン後にコピー</div></div>5 などの特定の形式でファイルを強制的にロードします。commonjs 仕様をロードします。 module もちろん、commonjs 標準モジュールの読み込みにも対応していますので、使い方は以下の通りです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { default as cjs } from &amp;#39;cjs&amp;#39;; // module.exports 导出 import cjsSugar from &amp;#39;cjs&amp;#39;; // module.exports import * as m from &amp;#39;cjs&amp;#39;;</pre><div class="contentsignin">ログイン後にコピー</div></div>6. import() 非同期インポート このような使い方はごく普通です。リアルタイムでロードする必要はありません。必要なときにロードされます。

const { default: barData } =
  await import(&#39;./bar.json&#39;, { assert: { type: &#39;json&#39; } });
ログイン後にコピー

7. http/https からの導入をサポートします (実験機能)

これは現在実験的な機能です。次のような制限があります:

http2/3 プロトコルはサポートされません

http プロトコルは、127.0 などのローカル IP アドレスにのみ使用できます。 .0.1

Cookie、認可、その他の情報は運ばれて送信されません
  • リモート エンドの js ファイルのみが読み込まれて実行され、リモート エンドの他の依存ファイルはロードされます。ロードされません
  • 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 がなぜサポートされていないのかについて不平を言うことさえあります。それをサポートしませんか?

それでは、自分自身に思い出してもらいたい一文があります - [本の山に道はなく、勤勉が道であり、学びの海と船には制限がありません]はボートです]。

ノード関連の知識の詳細については、

nodejs チュートリアル

を参照してください。

以上がノードでインポート構文を使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

nvmでノードを削除する方法 nvmでノードを削除する方法 Dec 29, 2022 am 10:07 AM

nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環境変数を構成し、バージョン番号を確認します; 3. 「nvm」を使用しますinstall" コマンド ノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。

Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。

Nodeのプロセス管理ツール「pm2」を徹底分析 Nodeのプロセス管理ツール「pm2」を徹底分析 Apr 03, 2023 pm 06:02 PM

この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。

PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか? PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか?ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。 pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。 Dec 02, 2022 pm 09:06 PM

Nodejs実行可能ファイルをpkgでパッケージ化するにはどうすればよいですか?次の記事では、pkg を使用して Node プロジェクトを実行可能ファイルにパッケージ化する方法を紹介します。

Python のインポートはどのように機能するのでしょうか? Python のインポートはどのように機能するのでしょうか? May 15, 2023 pm 08:13 PM

こんにちは、私の名前はsomenzzです。鄭兄弟と呼んでください。 Python のインポートは非​​常に直感的ですが、それでも、パッケージがそこにあるにもかかわらず、ModuleNotFoundError が発生することがあります。明らかに、相対パスは非常に正しいですが、エラー ImportError:attemptedrelativeimportwithnoknownparentpackage により、同じディレクトリにモジュールがインポートされ、別のものです。ディレクトリのモジュールは完全に異なります。この記事は、インポートの使用時によく発生するいくつかの問題を分析することで、インポートを簡単に処理するのに役立ちます。これに基づいて、属性を簡単に作成できます。

Angular と Node を使用したトークンベースの認証 Angular と Node を使用したトークンベースの認証 Sep 01, 2023 pm 02:01 PM

認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。

IDEA で Node.js を構成してインストールするにはどうすればよいですか?メソッドの簡単な分析 IDEA で Node.js を構成してインストールするにはどうすればよいですか?メソッドの簡単な分析 Dec 21, 2022 pm 08:28 PM

IDEA でノードを実行するにはどうすればよいですか?次の記事では、IDEA で Node.js を構成、インストール、実行する方法を紹介します。

See all articles