[Day 17 - npm] 哆啦A梦有百宝袋，我有套件管理工具npm

前端的社群发展愈来愈蓬勃，延伸出各式各样基於 HTML、CSS、JS 的开源套件，像是 Bootstrap、React、Vue、Styled-components 等等，帮助我们能使用这些工具加速开发。而为了管理这些大量的套件，并且方便引入专案，就有了 npm、Yarn 这类的套件管理工具出现。

套件管理工具 — npm

npm (Node Package Manager)，是 Node.js 发展的一个套件管理器，帮助开发人员方便的共享开源套件，可以轻松引入套件道专案中使用。

Node.js 是让电脑能以 Command line 的方式在服务器端执行 JavaScript 的开放原始码。

安装 npm

Step1：直接透过官网下载 Node.js，里面会直接包含 npm

Step2：开启终端机(Terminal)，所有 npm 指令会在这里执行

Step3：输入 node -v、npm -v，如果有出现版本资讯就是安装成功罗！

下载套件

终端机会有一个预设的路径，但我们是要在专案中新增套件，所以要先将路径指到指定的专案资料夹才能输入 npm 指令；或者是你也可以直接利用 Vscode 开启专案资料夹，Vscode 内建的 Terminal 会自动帮你指向该路径。

Vscode 内建的 Terminal 会自动指向该专案的路径

首先输入 npm init，它会要你输入一些专案的资讯，然後就会创建 package.json 文件，用来列出专案使用的所有套件包括版本资讯。

npm init

接着就可以透过 npm install 指令下载指定的套件，会被放在专案中的 node_modules 资料夹中。让我们先观察一下，下载套件後 package.json 所记录的套件资讯：

套件分别被记录在两个区块 dependencies 与 devDependencies，那者两者有什麽差别？

• dependencies：在开发完专案发布到服务器上後仍然会使用到的套件。
• devDependencies：只用在开发环境中的套件。

为了将想要的套件安装在指定的环境中，在使用 npm install 下载套件时，加上 --save 代表会同时安装到 dependencies 和 devDependencies；而加上 --save -dev 则是只会安装在开发环境 devDependencies下。

// dependencies 和 devDependencies
npm install --save package;

// devDependencies
npm install --save-dev package;

小结

知道如何使用 npm 後，我们就可以开始使用便利的套件加速该发，在下一章就会提到打包工具 webpack，让这些套件能够引入程序码中使用，并且转换成浏览器看得懂的文件。

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• npm
• 从零开始: 使用NPM套件
• NPM是什麽？了解Node Package Manager套件管理机制
• Node.js 是什麽？NPM又是什麽？为什麽前端与後端都需要用它们呢？
• 弄懂 npm install 的 –save 与 –save-dev