Node.js|npmとbundlerを使用して構築(feat.-d flag)

✒️Node.js

Node.jsとは何ですか.
:Chrome v 8 jsエンジンで構築されたJavaScriptランタイム(プログラミング言語が実行される環境)

にはHTTPサーバライブラリが内蔵されており、Webサーバ上でソフトウェアを必要とせずに実行できます.
◆Webブラウザでしか機能しないJS言語をブラウザから独立!!
▶JS言語でWebページ全体を作成できる!!

サーバだけでなく、複数のJavaScriptアプリケーション(babel、sass、ejsなど)

も実行できます.

✒️npm

npmとは何ですか.
Node Package Managerの略として、誰かがアップロードしたパッケージ(モジュール、機能)をダウンロードして使用できます.(like app store)
npmでは、ノード環境で拡張プログラムを使用するために、異なるモジュールをダウンロードできます.

🔎 モジュールのインストールと使用

モジュールをダウンロードする前に、端末が$ npm initを介してインストールしたパッケージのリストを管理することができる.jsonファイルを生成します.
次に、端末にnpm i parcel-bundler -Dおよびnpm i lodashを入力する.
コンパイラbundlerは、JavaScriptファイルを最適化、圧縮し、1つ以上の静的ファイルとして構築します.
例:lodashをインストールします.このライブラリは、オブジェクト、配列などのデータ構造を変換および処理するときに便利です.
ここで、-Dタグは、開発依存パッケージをインストールするために使用され、すなわち、開発時にのみ必要なパッケージをダウンロードするために使用される.
flag-D:開発依存パッケージのインストール|開発時のみパッケージが必要
=> package.jsonは「devDependencies」に分類される.
No-flag:一般依存インストール|Webブラウザで使用可能なパッケージ
=> package.jsonは依存項目を分類します.
簡単な使用例:
[ parcel-bundler ]

{
 .....생략
  "scripts": {
    "dev": "parcel index.html" 
		// dev 라는 명령어로 index.html 파일을 js언어로 parcel 한다.
		// $ npm run dev를 터미널에 입력하면, 서버를 열어서 볼 수 있음. 
		// $ npm start를 직접 설정해준 셈
  },
	...생략
  
   //개발용
  "devDependencies": { 
    "parcel-bundler": "^1.12.5" // 설치 버전
  },
   // 웹브라우저에서도 사용
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

[ lodash ]

import _ from "lodash"; 
// package.js 에서 _ 라는 변수로 불러와서 저장

console.log(_.camelCase("hello world"));
// _라고 저장된 lodash 내장함수 중에 카멜케이스를 가져와 실행

🔎 bundlerを使用して構築

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html" //추가
  },

端末では、$ npm run buildがbuildファイル(ここではdist)を生成します.
bundleとは、プロジェクト開発で使用する複数のモジュール(パッケージ)を組み合わせた操作です.
パッケージbundlerを使用してバンドル操作を行うと、プロジェクトで使用されているすべてのモジュールを含む新しいインデックスが作成されます.html, main.jsなどのWebブラウザで作業できるファイルを作成します.
このファイルを提供するだけで、Webブラウザで出力して使用できます.

🔎.gitignore

以上のすべてのモジュールのGit hubバージョンを管理する必要はありません..gitigonreファイルを作成し、ここで作成したフォルダはバージョン管理から除外されます.

.cache/
dist/
node_modules/

作成後に端末を$ git init操作すると、設定を無視したファイルがグレー表示され、Git hubのpullおよびpushエントリから除外されます.
Ref : https://hanamon.kr/nodejs-概念-理解/
サムネイル:(https://velog.velcdn.com/images/imzzuu/post/0781c6ac-6f18-40aa-8aab-df7646d829b6/image.png)