[Day13] Node.js ＆ NPM

从头到尾硬干一个网站是非常费功费时的事情，为了节省开发时间就会尽量引用现成的套件，随着引用的套件越来越多，就会需要管理这些套件的种类、版本，接着就来学习套件管理工具的使用。

1. Node.js & NPM

过去 JavaScript 大多只用在前端，Node.js 出现後跨足到了後端领域，NPM（Node Package Manager） 是包含在 Node.js 内的套件管理工具，虽然前端工程师在学习初期不会接触到後端服务器的架设，但 NPM 是无论前後端都会学习、使用到的重要工具。

2. Yarn

Yarn 也是一个套件管理工具，在安装速度、安全性及稳定性相对 NPM 都较好，操作指令也大致相同，在团队开发时可以确认使用的管理工具，不宜将 NPM 和 Yarn 混用，可能会有些设定上的问题。

3. 安装步骤

1. 到官方网站下载 Node.js 安装档（建议选左边的 LTS 稳定支援版本）

2. NPM 在 Node.js内，无需另外安装，我们可以使用 npm 指令下载 yarn

$ npm install --g yarn

官网连结
Node.js
Yarn

3. 完成後可以输入指令查询版本

// Node.js
$ node -v

// NPM
$ npm -v

// Yarn
$ yarn -v

本篇文章撰写时使用的套件版本

4. Node.js 简易操作

因为这次文章不会练习到服务器功能，这边只简单介绍

1. 进入 node.js

$ node

2. 可以试着让他吐一点东西出来

$ console.log('Hello, world!')

3. 看看有哪些指令可用

$ .help

4. 离开 node.js

$ .exit

5. NPM 起手势

1. 新增一个专案资料夹

2. 使用 VS Code 开启专案资料夹

3. 切换到终端机介面（ctrl + `）

4. 初始化
   输入指令後，会依序询问『专案名称、版本、描述、进入点、测试指令、Git储存库、关键字、作者、授权方式』，不知道要打什麽的时候就一路 Enter 到底就好，会套用预设值（写在小括弧内）。

   $ npm init
   
   // 跳过环境设定，直接用预设值建立。
   $ npm init -y
   

6. 安装／移除套件

1. 大部分的套件安装只要输入指令 npm install 套件名称 或是简写 npm i 套件名称即可：

   // Bootstrap
   $ npm install bootstrap
   
   // Font Awesome
   $ npm i fontawesome
   
   // MacOS 如果遇到权限不足的错误，在指令前方加上 sudo，并且提供使用者帐号密码
   $ sudo npm install 套件名称
   

2. 移除套件指令是npm uninstall 套件名称 或是简写 npm r 套件名称，r 在此为 remove 的缩写。

7. 档案功用说明

装完管理工具和套件後，专案资料夹会多了一些档案，功用分别如下：

1. package.json

• 是整个专案的缩影，记录了基本资讯、指令定义和使用的套件种类、版本...等资讯，团队合作时，不需将所有相依套件打包提供其他成员下载，其他成员只需要取得 package.json 档案後执行 npm install(i) 指令，就会自动安装成相同的开发环境了。
• 在安装套件後，package.json 档案内的 dependencies 记录套件名称、版本资讯，通常版本的数字前面会有一个 ^ 符号，表示如有更新的版本就会下载最新的。

2. package-lock.json

• 工作团队成员可能加入的时间不同，当新成员执行 npm i 指令时可能会有部分的套件下载到更新的版本，如果希望团队的套件版本一致，就可以把这个 package-lock.json 也提供给其他成员，里面会指定下载的版本；反之，如果希望团队成员都使用最新版本，就不需要提供这个档案

3. node-modules 里面存放着下载回来的套件实体档案。
   

8. 全域安装

套件安装在全域环境中，就不需在个别专案重复安装。

全域安装通常用在仅个人使用的本地套件，例如：安装本地的套件管理工具 Yarn。

$ npm install -g 套件名称

9. 开发版本

有些套件是上线时会使用（例如：jQuery, Bootstrap...），有些是仅在开发中使用（例如：Webpack, 各种预处理器...），开发用的套件并不需要上线部署，所以我们可以把它分成开发、上线两类存放。

1. 上线版：前面学到的指令就是上线版，在某些较旧的文章会看到需要加上 --save 这个参数，在 npm5 版本以後这已经是预设值，不需要另外撰写。
2. 开发版：

• npm install -dev 套件名称 或是简写成 npm i -D 套件名称（注意，D需要是大写）。
• 开发版的套件会注记在 package.json 中的 "devDependencies" 属性，和上线版的 "dependencies" 不同，可以观察一下确认是否成功装对位置。
  

10. NPM 与 Yarn 指令对照

在完成了基本的练习後，也可以试着使用 Yarn 从头做一次

详细指令比较参考网站
(Cheat Sheet: npm vs Yarn Commands)[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet]