[javascript]モダンjavascriptDeepDive-3JavaScript開発環境と実行方式

3912 ワード
テキストリンク
JavaScriptは、ブラウザ環境またはノードです.js環境で実行できます.1つの違いはブラウザとnodeです.jsは、JavaScriptを中心としたECMAScriptを実行できますが、ブラウザとノードです.jsではECMAScript以外の機能は互換性がありません.
例えば、ノード.jsはDOM APIを提供しない.逆に、ノード.jsはファイルの作成と変更が可能な内蔵ファイルシステムを提供していますが、ブラウザではサポートされていません.

Node.js


Node.jsとnpmの概要


簡単に言えば、Nodeは非ブラウザ環境でブラウザでのみ実行されるJavaScriptを実行できる実行環境である.jsです.
npmはJavaScriptパッケージマネージャです.Node.jsで使用可能なモジュールをリポジトリにパッケージ化し、パッケージのインストールと管理のためのCLIを提供します.

Node.jsインストール

node -v
npm -v
cmdで実行すると、バージョンが表示されます.

node.js REPL


Node.jsが提供するREPL(Read Eveal Print Loop)を使用すると、簡単なJavaScriptコードを実行して結果を表示できます.
node

CTRL+Cを2回入力すると終了です.

ビジュアルスタジオコード


index.js
const arr = [1,2,3];

arr.forEach(console.log);
VSコードには端末が内蔵されている(ウィンドウではコマンドプロンプト).内蔵端末を開くには、Ctrl + ` のショートカットキーを押します.

Code Runner拡張プラグイン


VSコードでは、拡張プラグインリポジトリ「市場展示」から各種拡張プラグインをダウンロードしてインストールすることができます.

現在表示されているJavaScriptファイルを実行するには、次のショートカットキーを使用します.
  • ウィンドウ:CTRL+ALT+N
  • macOS : Control ^ + option + N

    • Live Server拡張プラグイン


    クライアントWeb APIを含むJavaScriptコードを実行するには、「Node」をクリックします.js環境ではなくブラウザで実行する必要があります.上記の例をブラウザで実行するには、開発者ツールのコンソールで実行するか、JavaScriptコードをHTMLに挿入してブラウザでHTMLファイルを開く必要があります.
    index.html
    <!DOCTYPE html>
<html>
<body>
    <script src="index.js"></script>
</body>
</html>
    上記のHTMLファイルはブラウザで直接開くことができますが、ファイルパスの問題が発生したり、ソースコードを変更するたびにリフレッシュする必要があるため、面倒です.

    Live Serverという拡張プラグインを使用すると、ソースコードを変更するたびに自動的に変更をブラウザに反映できるので便利です.

    「GoLive」ボタンが表示されましたこのボタンをクリックすると、仮想サーバが起動し、ブラウザにHTMLファイルが自動的にロードされます.後でソースコードを変更すると、変更は自動的に仮想サーバに反映されます.
    RK 2918コンパイル手順
    一般的なフレームワークのデモ