Skip to main content

Import Export

@serverSerrverlesskiy

オブジェクト、関数、クラス、または変数🔔を外部で利用できるようにするには、それらをエクスポートしてから、必要に応じて他のプロジェクトファイルにインポートします。

«Hello, World!» на Node.js​

Node.js®はエンジン上に構築されたJavaScript環境です Chrome V8.

コンソールに「node」と入力して、Node.jsから始めてください。

$ node
>

お持ちでない場合は、ダウンロード して、コンピューターにインストールしてください。

Node

それでは、何かを印刷してみましょう。

$ node
> console.log('hello from Node.js')
// Enterキーを押すと、次のようになります。
hello from Node.js
undefined

Export

このインターフェースを使用してNode.jsを自由に試してみてください。すべてをファイルに入れることが現実的でない場合は、ここで小さなコードをテストするのが一般的です。

HelloNode.jsアプリケーションを作成する時が来ました!

index.jsファイルを作成することから始めましょう。 次のコマンドを使用して、myProjectフォルダーを作成して入力します。

mkdir myProject && cd myProject

次に、index.jsファイル自体を作成します

touch index.js

コードエディタを開くか、ダウンロードしてインストールします。 VS Code をお勧めします。

コードエディタを開き、作成したプロジェクトのフォルダを追加します。

new prroject

次に、このアイコンをクリックしてサイドメニューを開きます。

new prroject

次のコードスニペットをコピーします。

// index.js
console.log('hello from Node.js')

このファイルを実行するには、ターミナルを再度開き、index.jsが配置されているディレクトリに移動する必要があります。

В VS Code это можно сделать нажав на эти значки.

new prroject

そして、「ターミナル」タブを選択します

new prroject

目的の場所に正常に移動したら、コマンドを使用してファイルを実行します

node index.js

このコマンドは以前と同じ出力を生成し、文字列を端末に直接出力することがわかります。

new prroject

アプリケーションのモジュール性​

Export

次のレベルに進む時が来ました! 読みやすさと保守性のために、ソースコードをいくつかのJavaScriptファイルに分割して、より複雑なものを作成しましょう。

プロジェクトの構造​

次のディレクトリ構造(空のファイルを含む)を作成しますが、まだ `package.json'は作成しないでください。次のステップで、自動的に生成します。

├── app
| ├── calc.js
| └── index.js
├── index.js
└── package.json

VS Codeで新しいファイルまたはフォルダを作成するには、図に示すように対応するアイコンをクリックします。

new file

package.json​

すべてのNode.jsプロジェクトは、package.jsonファイルの作成から始まります。 これは、アプリケーションとその依存関係のJSON表現と考えることができます。 これには、アプリケーションの名前、作成者(あなた)、およびアプリケーションの実行に必要なすべての依存関係が含まれています。 これはあなたのプロジェクトマップです。

コマンドを使用して、package.jsonファイルをインタラクティブに生成できます

npm init

ターミナルで。 コマンドを実行すると、アプリケーション名、バージョン、説明などの情報を入力するように求められます。 心配する必要はありません。生成されたJSONが表示され、「大丈夫ですか」という質問が表示されるまで、「Enter」キーを押してください。 最後にもう一度Enterを押すと、出来上がりです。 package.jsonが自動的に生成され、アプリケーションフォルダに配置されます。 このファイルをIDEで開くと、以下のコードスニペットと非常によく似ています。

// package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

パッケージpackage.jsonに開始スクリプトを追加することをお勧めします。 したがって、次の行をscriptsオブジェクトに追加します。

"scripts": {
"start": "node index.js", // この行
"test": "echo \"Error: no test specified\" && exit 1"
}

これが完了したら、npmstartコマンドを使用してアプリケーションを起動できます。

輸入​

次に、作成した最初のファイルindex.jsに戻りましょう。 このファイルは非常にコンパクトに保つ​​ことをお勧めします。アプリケーション自体の接続のみです(前に作成した /appサブディレクトリのindex.jsファイル)。 次のコードをindex.jsファイルにコピーして保存します。

// index.js
require('./app/index')

またはすべてのindex.jsファイルの省略形

// index.js
require('./app')

特定のファイルが指定されていない場合、コードインタープリターはindex.jsファイルを探して入力します。 そのように、最初のファイルをプロジェクトに含めました。

Export

書き出す​

次に、実際のアプリケーションの構築を開始します。 /appフォルダーからindex.jsファイルを開いて、非常に単純な例を作成します。数値の配列を追加します。 この場合、 index.jsファイルには追加したい数値のみが含まれ、計算が必要なロジックはcalc.jsファイルの別のモジュールに配置する必要があります。 このコードを/appディレクトリのindex.jsファイルに貼り付けます。

// app/index.js
const calc = require('./calc')
const numbersToAdd = [3, 4, 10, 2]
const result = calc.sum(numbersToAdd)

console.log(`The result is: ${result}`)

次に、実際のビジネスロジックを同じフォルダにあるcalc.jsファイルに貼り付けます。

// app/calc.js
const sum = arr => {
return arr.reduce((a, b) => a + b, 0)
}

module.exports.sum = sum // export

このファイルでは、 sum関数を作成してエクスポートし、他のプロジェクトファイルで使用できるようにしました。

すべてが正しく行われたかどうかを確認するには、これらのファイルを保存し、ターミナルを開いて「npmstart」または「nodeindex.js」と入力します。 すべてが正しく行われた場合、答えは次のようになります。 19.何か問題が発生した場合は、コンソールのログを注意深く確認し、それに基づいて問題を見つけてください。

new file

合計​

これで、モバイル開発 のJavaScriptコースの準備コースを完了しました。

問題?​

Problem

Discord または電報 chat に書き込み、news。

質問:​

Question

オブジェクト、関数、クラス、または変数を外の世界で利用できるようにするには、次のことを行う必要があります。

  1. それらをエクスポートしてからインポートします
  2. それらをインポートしてからエクスポートします

Node.js®は次のとおりです。

  1. プログラミング言語
  2. ChromeV8エンジン上に構築されたJavaScript環境
  3. ブラウザ

package.jsonは次のとおりです。

  1. ChromeV8エンジン上に構築されたJavaScript環境
  2. アプリケーションとその依存関係のJSON表現
  3. JSONプログラミング言語

このレッスンでどれだけ学んだかを理解するために、このトピックについて当校の[モバイルアプリケーション](http://onelink.to/njhc95)でテストを受けてください。

Sumerian school

リンク:​

  1. MDNWebドキュメント。 記事「ECMAScript6のモジュール:未来は今」
  2. 記事「ES6モジュールとJavaScriptでのインポートとエクスポートの使用方法」
  3. 「必要なvs.ES6のインポート/エクスポート」の記事

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy K.

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!