nodejsの使用を開始するには、この記事で十分です

0.学習目標

ドキュメントに従ってNode.jsをインストールする機能

npmを使用してコンポーネントをインストールする機能

jsをwebpackでパッケージ化する機能

es6のlet変数とconst変数の違いがわかります

破壊式を使用してオブジェクトのプロパティを操作する

エクスポートを使用してモジュールファイルをエクスポートする機能

インポートを使用してモジュールファイルをインポートする機能

1. Node.js

1.1.Node.jsとは何ですか

簡単に言えば、Node.jsはサーバー側で実行されるJavaScriptです。
Node.jsは、ChromeJavaScriptランタイム上に構築されたプラットフォームです。

Node.jsは、イベント駆動型のI / Oサーバー側JavaScript環境です。GoogleのV8エンジンに基づいて、V8エンジンはJavaScriptを非常に高速に実行し、非常に優れたパフォーマンスを発揮します。

1.2.Node.jsのインストール

1.システムに対応するNode.jsバージョンをダウンロードします

https://nodejs.org/en/download/。

2.インストールするインストールディレクトリを選択します

LTSバージョンをダウンロードすることをお勧めします。デフォルトでは、インストール中に次のステップに進みます

完了したら、コンソールに次のように入力します。

# 查看node版本信息
node -v

1.3。クイックスタート

1.3.1。テストプロジェクトを作成する

1.3.2。コンソール出力

次に、コンソールで出力する方法、テキストファイルdemo1.jsを作成する方法、コードコンテンツを示す、最も簡単な例を実行してみましょう。

var a=1;
var b=2;
console.log(a+b);

コマンドプロンプトでコマンドを入力します

node demo1.js

1.3.3。関数の使用

テキストファイルdemo2.jsを作成します

var c=add(100,200);
console.log(c);
function add(a,b){
    return a+b;
}

コマンドを入力するためのコマンドプロンプト

ノードdemo2.js

実行後、出力が300であることがわかります。

1.3.4。モジュラープログラミング

各ファイルはモジュールであり、独自のスコープがあります。ファイルで定義された変数、関数、およびクラスはプライベートであり、他のファイルからは見えません。

テキストファイルdemo3_1.jsを作成します

exports.add=function(a,b){
    return a+b;
}

各モジュール内で、モジュール変数は現在のモジュールを表します。この変数は、exportsプロパティ（つまりmodule.exports）が外部インターフェイスであるオブジェクトです。モジュールをロードすると、実際にはモジュールのmodule.exportsプロパティがロードされます。

テキストファイルdemo3_2.jsを作成します 

//引入模块demo3_1
var demo= require('./demo3_1');
console.log(demo.add(400,600));

コマンドプロンプトでコマンドを入力します

node demo3_2.js

結果は1000です 

1.3.5.Webサーバーの作成

テキストファイルdemo4.jsを作成します

//http是内置模块
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

httpはノードの組み込みWebモジュールです

コマンドプロンプトでコマンドを入力します

node demo4.js

サービスの開始後、ブラウザを開き、URL
http：// localhost：8888/を入力します

Webページの出力結果を見ることができますHelloWorld

コマンドラインでCtrl+cを押して、実行を終了します。

1.3.6。サーバー側のレンダリングを理解する

demo5.jsを作成し、上記の例をループの形式で記述します

var http = require('http');
http.createServer(function (request, response) {
    //发送 HTTP 头部
    //HTTP 状态值: 200 : OK
    //内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    //发送响应数据 "Hello World"
    for(var i=0;i<10;i++){
        response.write('Hello World\n');
    }
    response.end('');
}).listen(8888);
//终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

コマンドプロンプトでコマンドを入力して、サービスを開始します

node demo5.js

ブラウザのアドレスバーにhttp://127.0.0.1:8888と入力して、クエリ結果を表示します。

[ソースコードの表示]を右クリックして、作成したforループステートメントはなく、直接Hello Worldが10個あることを確認します。これは、このループがブラウザー（クライアント側）ではなくサーバー側で完了することを意味します。これはJSPと非常によく似ています。

1.3.7。受信パラメータ

demo6.jsを作成する

//引入http模块
var http = require("http");
var url = require("url");
//创建服务，监听8888端口
http.createServer(function (request, response) {
    
    //发送http头部
    //http响应状态200
    //http响应内容类型为text/plain
    response.writeHead(200, {"Content-Type": "text/plain"});
    //解析参数
    //参数1:请求地址; //参数2:true时query解析参数为一个对象，默认false
    var params = url.parse(request.url, true).query; //将所有请求参数输出
    for (var key in params) {
        response.write(key + " = " + params[key]);
        response.write("\n");
    }
    response.end("");
}).listen(8888);
console.log("Server running at http://127.0.0.1:8888 ")

コマンドプロンプトでコマンドを入力します

node demo6.js

ブラウザでhttp://127.0.0.1:8888?id=123&name=zhangsanにアクセスします。テスト結果：

2.パッケージエクスプローラーNPM

2.1.NPMとは

npmは、ノードパッケージ管理および配布ツールであるNodePackageManagerの略です。実際、NPMはフロントエンドのMavenとして理解できます。

npmを使用すると、jsライブラリを簡単にダウンロードして、フロントエンドプロジェクトを管理できます。

これで、node.jsがnpmツールを統合しました。コマンドプロンプトでnpm -vと入力して、現在のnpmバージョンを表示します。

2.2.NPMコマンド

2.2.1。初期化プロジェクト

initコマンドは、プロジェクト初期化コマンドです。空のフォルダーを作成するか、上記のサンプルプロジェクトで、コマンドプロンプトでフォルダーを入力し、コマンドの初期化を実行します

npm init

プロンプトに従って関連情報を入力するか、デフォルト値が使用されている場合はEnterキーを押します。

名前：プロジェクト名

バージョン：プロジェクトのバージョン番号

説明：アイテムの説明

キーワード：{配列}キーワード、ユーザーがプロジェクトを簡単に検索できる

最後に、package.jsonファイルが生成されます。これは、パッケージの構成ファイルであり、mavenのpom.xmlと同等であり、必要に応じて変更できます。

 

2.2.2。ローカルインストール

installコマンドは、requireを介してプロジェクトに導入できるモジュールをインストールするために使用されます。Expressモジュール（ノードのWebフレームワーク）をインストールする場合、出力コマンドは次のようになります。

npm install express
--如果下载慢可以参考本章2.2.5小结,使用cnpm淘宝镜像
--cnpm install express

警告メッセージが表示されます。無視してかまいません。コマンドは正常に実行されましたのでご安心ください。

node_modulesフォルダーとpackage-lock.jsonがこのディレクトリに表示されています

node_modulesフォルダーは、ダウンロードされたjsライブラリー（mavenのローカルウェアハウスに相当）を格納するために使用されます

package-lock.jsonは、node_modulesまたはpackage.jsonが変更されたときに自動的に生成されるファイルです。このファイルの主な機能は、現在インストールされているパッケージの依存関係を判別することです。これにより、プロジェクト開発プロセス中に一部の依存関係で発生した更新を無視して、その後の再インストール時に同じ依存関係が生成されます（異なるミラーソース、同じ大きいバージョン番号の下で互換性の問題がある可能性があります。パッケージロックにより、ソースが変更された場合でも、ダウンロードしたファイルを元のファイルと同じに保つことができます）。

package.jsonファイルを再度開くと、今ダウンロードしたエクスプレスが依存関係リストに追加されていることがわかります。

バージョン番号の定義について：

指定版本:比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

波浪号(tilde)+指定版本:比如~1.2.2，表示安装1.2.x的最新版本(不低于1.2.2)，但是不安装1.3.x，也就
是说安装时不改变大版本号和次要版本号。

插入号(caret)+指定版本:比如ˆ1.2.2，表示安装1.x.x的最新版本(不低于1.2.2)，但是不安装2.x.x，也就 是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

latest:安装最新版本。

2.2.3。グローバルインストール

ローカルインストールを使用しました。これにより、現在のディレクトリにjsライブラリがインストールされ、グローバルインストールによってライブラリがグローバルディレクトリにインストールされます。グローバルインストール後、コマンドラインでインストールされたモジュールに対応するコンテンツまたはコマンドを使用できます。

グローバルディレクトリがどこにあるかわからない場合は、コマンドを実行してグローバルディレクトリパスを表示します

npm root -g

WINDOWSのデフォルトのグローバルディレクトリは

C：\ Users \ your username \ AppData \ Roaming \ npm \ node_modules

MACのデフォルトのグローバルディレクトリは

/ usr / local / lib / node_modules

たとえば、jqueryをグローバルにインストールするには、次のコマンドを入力します

# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件
npm install jquery -g

知らせ：

作成者はMacシステムを使用しています。権限が不十分であるというプロンプトが表示されたら、sudo-sコマンドを使用してrootユーザーに切り替えます。

Windowsは管理者としてcmdを実行する必要があります

2.2.4。バッチダウンロード

インターネットからコードをダウンロードして、package.jsonのみがあり、node_modulesフォルダーがないことを確認します。この時点で、コマンドを使用してこれらのjsライブラリを再ダウンロードする必要があります。

ディレクトリ（package.jsonが配置されているディレクトリ）を入力し、コマンドを入力します

npm install

この時点で、npmはpackage.json内の依存するjsライブラリを自動的にダウンロードします。

2.2.5.NPMミラーの切り替え

npmを使用してリソースのダウンロードが非常に遅い場合があるため、ダウンロードしたミラーソース（Taobaoミラーなど）を切り替えるか、cnmp（Taobaoミラーを指定）をインストールしてダウンロード速度を上げることができます。

1.ミラーソースを切り替える方法を使用する場合は、次のツールを使用できます。nrm

最初にnrmをインストールします。ここで、-gはグローバルインストールを表します

# 管理员身份 打开cmd执行如下命令
npm install nrm -g

次に、nrm lsコマンドを使用してnpmリポジトリリストを表示します。*が付いているものは、現在選択されているミラーリポジトリです。

 nrmusetaobaoで使用するミラーソースを指定します。

 

2. cnpmを使用する場合は、最初にcnpmをインストールして、次のコマンドを入力します

# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

インストール後、次のコマンドを使用してcnpmのバージョンを確認できます

cnpm -v

 cnpmを使用する

cnpm install 需要下载的js库;一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;

2.2.6。操作エンジニアリングの指示

プロジェクトを実行する場合は、runコマンドを使用します

package.jsonで定義されたスクリプトに次のものがある場合：

• devは、開発フェーズのテスト実行です
• ビルドとは、プロジェクトをビルドしてコンパイルすることです
• lintはjsコード検出を実行することです

ランタイムコマンド形式：

npm run dev或者build或者lint

2.2.7。プロジェクトの説明をコンパイルする

コンパイルされたコードはdistフォルダーに配置され、コマンドプロンプトを入力して、コマンドを入力します

npm run build

生成后会发现只有个静态页面，和一个static文件夹
这种工程我们称之为单页Web应用(single page web application，SPA)，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
这里其实是调用了webpack来实现打包的，关于webpack下面的章节将进行介绍。

3.Webpack入門

3.1.Webpackとは

Webpackは、フロントエンドのアセット読み込み/バンドルツールです。モジュールの依存関係に従って静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。webpackjs

 図からわかるように、Webpackはさまざまな静的リソースjs、cssなどを静的ファイルに変換してページリクエストを減らすことができます。次に、Webpackのインストールと使用法について簡単に紹介します。

3.2.Webpackのインストール

グローバルにインストール

npm install webpack -g
npm install webpack-cli -g

インストールが失敗した場合は、グローバルディレクトリ内のwebpackの関連フォルダを削除し、上記のコマンドを実行します

 インストール後にバージョン番号を確認してください

webpack -v

3.3.クイックスタート

3.3.1.JSパッケージング

（1）srcフォルダーを作成し、bar.jsを作成します

exports.info=function(str){
   document.write(str);
}

（2）srcの下にlogic.jsを作成します

exports.add=function(a,b){
    return a+b;
}

（3）srcの下にmain.jsを作成します

var bar= require('./bar');
var logic= require('./logic');
bar.info( '100 + 200 = '+ logic.add(100,200));

（4）srcと同じディレクトリにある設定ファイルwebpack.config.jsを作成します

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
//入口文件
    entry: "./src/main.js", output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

上記のコードは、現在のディレクトリのsrcフォルダにあるmain.js（エントリファイル）の内容を読み取り、対応するjsファイルをパッケージ化し、パッケージ化されたファイルを現在のディレクトリのdistフォルダに配置し、jsファイルをパッケージ化することを意味します。名前はbundle.jsです

  （5）コンパイルコマンドを実行します

 （7）index.htmlと参照bundle.jsを作成します

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>nodejs测试</title>
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

ブラウザでindex.htmlファイルにアクセスすると、コンテンツが出力されていることがわかります。

3.3.2.CSSパッケージ

（1）インストールstyle-loaderとcss-loader
Webpack自体はJavaScriptモジュールのみを処理できます。他の種類のファイルを処理する場合は、変換にローダーを使用する必要があります。

ローダーは、モジュールとリソースのコンバーターとして理解できます。ローダー自体は、ソースファイルをパラメーターとして受け取り、変換の結果を返す関数です。このようにして、requireを介して、CoffeeScript、JSX、LESS、画像など、あらゆるタイプのモジュールまたはファイルをロードできます。まず、関連するローダープラグインをインストールする必要があります。css-loaderはcssをjavascriptにロードし、style-loaderはjavascriptにcssを通知します。

cnpm install style-loader css-loader --save-dev

-saveは、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルの依存関係ノードに依存関係を書き込むことを意味します。npm install
--productionを実行するか、NODE_ENV変数の値をproductionとして指定すると、モジュールは自動的にnode_modulesディレクトリーにダウンロードされます。

-save-devは、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルのdevDependenciesノードに依存関係を書き込むことを意味します。npm install --productionを実行する場合、またはNODE_ENV変数の値をproductionとして指定する場合、モジュールはnode_modulesディレクトリーに自動的にダウンロードされません。

cnpm install less less-loader --save-dev

 （2）webpack.config.jsを変更します

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }
        ]
    }
}

（3）srcフォルダーにcssフォルダーを作成し、cssフォルダーにcss1.cssを作成します。

body {
    background-color: blue;
}

 （4）main.jsを変更し、css1.cssを導入します

（5）webpackを再実行します

（6）index.htmlを実行して、背景が青に変わるかどうかを確認しますか？