Openlayers 6.2.1浅く味わう心得(二)

シーケンスOpenlayers 6.2.1開発環境の構築について述べ,各プラグインの機能を簡単に述べた.今日、Node環境におけるOpenLayers開発に関する小さな心得を引き続き記録する.
問題のまとめOpenlayersの環境構築を完了し、次のタスクは機能開発です.次に、全文は、ブロガーが開発中に遭遇したNodeに関連するすべての問題の総括を記録する.
一、キーワードimport,exportの理解importおよびexportは、ES6に追加された2つのキーワードとして、主に役割ドメインの問題を解決するために使用される.通常、importとexportはペアで使用される.すなわち、B.jsにstrという変数を定義し、他のjsファイルでも使用できるようにするには、B.jsファイルにexportキーワードを使用してstrをエクスポートする必要があります.同時にA.jsファイルもimportキーワードを使用してstrをインポートして使用する必要があります.
二、具体的なコード及び関連問題
まず、同じディレクトリの下に次の3つのファイルを作成します.
A.js

import str from "./B";
import {bbb} from "./B";
// str = null;
document.write(str+bbb);

B.js

let str = "blablabla~";
let bbb = "NB";
export default str;
export {bbb}

index.html

(ここでブロガー のIDEツールは、インタフェースの Terminalパネル でコマンドを くことができます)

npm start

プロジェクトの 、プロジェクトポートが されていない は、http://localhost:1234に アクセスすると、ページの が されます.

blablabla~NB

インタフェースに されている の が されている は、プロジェクトparcelプラグインに がないことを します.では、コードを してみましょう.
1.ファイル に づいて、まずB.jsのファイルを てみましょう.このファイルでは、letのキーワードによって strとbbbが され、export defaultとexport {}の2つの によって が われています.ここで すべきは、export defaultで を う 、1つのjsファイルに1 しか れなくても れなくてもよいことである. 、export {} の では、 すべき の を に れ、カンマで ることができる.
2.A.jsファイルにおいて、 の2 はB.jsから された のインポートである.1 はexport defaultに して を する であり、2 はexport {}に して を する であり、 する がある は に の する がある を し、カンマで るだけでよい.このセクションでは、export defaultおよびexport {}から された をimport {} fromに して にインポートすることはできないことに してください.
3.index.htmlでは、ここではA.jsのみが され、B.jsは されていないが、コードは に していることがわかる.これは、 たちが したプロジェクト が、 で にインポートすることなく、エントリファイル(index.html)と のファイルとの を に インポートできるためです.
4. 、A.jsのファイルを り ってみましょう.3 に が したコードがあります.コメントを して させます. は のとおりです.

A.f5b0a0fa.js:116 Uncaught Error: "str" is read-only.
at A.js:3
at Object.parcelRequire.A.js../B (A.js:3)
at newRequire (A.f5b0a0fa.js:47)
at A.f5b0a0fa.js:81
at A.f5b0a0fa.js:120

A.jsファイルでB.jsファイルの strを したため、 のエラーが したことがわかります.エラーの は、A.jsファイルのうちB.jsファイルが み り であり、 い えれば、A.jsでは strが すメモリアドレスを する がありません.
5. に、A.jsとindex.htmlのファイルについて の を います. のコードは の りです.
A.js:

function onLoadTest() {
    document.write("  ，   ~！");
}

index.html:

コードを したら、Terminalパネルでnpm startコマンドを して、プロジェクトを しますが、 は「ほほほ」です. たちはページの ， ~！の を ていないだけでなく、ブラウザは いを しました.

Uncaught ReferenceError: onLoadTest is not defined
at onload ((index):8)

onLoadTest ?どうして?A.jsファイルで されているのに?しかもhtmlには があるファイルも されていますね~!(exportで をエクスポートしていないという もいるかもしれませんが、ここではその もそう ってエクスポート をしていたので、 は できますが、エラーが されています) き を えてみて、index.htmlファイルを いているブラウザに ドラッグしてみて、 を ましたか? には ， ~！と かれています.ここを てもっと かになったのではないでしょうか.なぜそうなったのか し、この をどう するかを します.
このような が するのは,オブジェクト けのモジュール モデルでは,あるjsファイルで した や の ドメインが のファイルのみであり, らが するファイルを すと び すことができないため,エラーを するためである.ここを て、もしあなたがまた えたら、 はA.jsファイルの で をエクスポートして、index.htmlの で import {XXX} from "XXX";で関数をインポートすればいいのではないでしょうか.もう一度一緒に考えてよかったのですが、残念ながらこのインポート方式はブラウザで禁止されているので、通用しません.どうすればいいの?js関数をhtmlに書きますか?本当にそうすれば、本当にいいですね.しかし、htmlに他のjsファイルの関数をネストすると、ブラウザはこのような方法を許可しないため、このようなプロジェクトは現実的ではありません.死のサイクルだ~!
どうする?方法は、htmlノードに動的または静的に書かれた呼び出された関数をグローバル変数に設定すればよい.つまり、呼び出す必要がある関数をグローバル役割ドメインに配置し、プロジェクト内の任意のファイルで自由に呼び出すことができます.ここでは、ブラウザおよびNodeのグローバル変数の問題も提起される.
ブラウザでは、最上位レベルのグローバル変数はwindowsで、すべてのjsファイルに定義されたすべての変数が含まれています.Nodeでは、最高レベルのグローバル変数はglobaであり、彼らの間には違いがありますが、これは私たちの使用に影響を与えないので、私たちが注目しているポイントではありません.△どんな違いがあるか聞かないで、聞かないでください.グローバル変数がある以上、私たちがしなければならないのは、この変数に属性を追加することです.修正されたコードは以下の通りです.
A.js

global.onLoadTest = function () {
    document.write("  ，   ~！");
};

さあ、npm startをもう一度運転してみましょう.楽しいですか: ， ~！.
三、まとめ:Node環境下のフロントエンドプロジェクトの開発は、これまでhtmlファイルにjsファイルを導入してきた方法とは多くの違いがあり、慣れない点がありますが、これは重要ではありません.新しい技術を抱擁することが私たちのプログラム猿の成長、楽しみの根本ではないでしょうか.