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

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

#js モジュール化

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

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

したがって、主流の仕様は

CommonJS と ESM の 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:js;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:js;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('./bar.json', { assert: { type: 'json' } });

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

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

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

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

Cookie、認可、その他の情報は運ばれて送信されません

• リモート エンドの 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 を使用することは許可されていない場合、エラーが報告されます:

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)

概要実際、これは一般的な知識ではありません。Node.js を少しだけやったことがあれば、注意を払い続ければ、基本的にこれについて学ぶことができます。特徴。

しかし、注意を払わない人は、自分自身の知識の誤解に陥りがちです。Node.js は ESM 仕様をサポートしていないと常に考え、Node.js がなぜサポートされていないのかについて不平を言うことさえあります。それをサポートしませんか？

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

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

nodejs チュートリアル

を参照してください。

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