Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 32 節： Exploring Modules & The NPM Universe
###### tags: `JavaScript` `Udemy` `The Web Developer Bootcamp 2021`
2021.11.01（Mon.）~2022.02.17（Thu.）
## ● 上課筆記
## 1. module.exports
> 參考網站：[《Chris 技術筆記》Node.js 的 module.exports 和 require](https://dwatow.github.io/2018/02-13-js-module-require-exports/)
> 參考網站：[關於 module.exports 的兩三事](https://ithelp.ithome.com.tw/articles/10185083)
> 參考網站：[官方文件](https://nodejs.org/docs/latest-v15.x/api/modules.html#modules_module_exports)
要載入模組，需要利用`require()`。
若要載入的模組是自創的，require的括號裡面要寫清楚檔案的路徑！
****
==範例1==
* math.js
```javascript=
module.exports.add = (x, y) => x + y;
module.exports.PI = 3.1415926;
module.exports.square = x => x * x;
```
* app.js
```javascript=
const math = require("./math");
console.log(math.PI);
console.log(math.square(9));
```
* 執行 / 結果
```
> node app.js
3.1415926
81
```
****
==範例2==
* math.js
```javascript=
module.exports.add = (x, y) => x + y;
module.exports.PI = 3.1415926;
module.exports.square = x => x * x;
```
* app.js
```javascript=
const {PI, square} = require("./math");
console.log(PI);
console.log(square(9));
```
* 執行 / 結果
```
> node app.js
3.1415926
81
```
****
==範例3==
* math.js
```javascript=
module.exports.add = (x, y) => x + y;
module.exports.PI = 3.1415926;
module.exports.square = x => x * x;
```
* app.js
```javascript=
const {PI, square} = require("./math");
console.log(PI);
console.log(square(9));
```
* 執行 / 結果
```
> node app.js
3.1415926
81
```
****
==範例4==
* math.js
```javascript=
const add = (x, y) => x + y;
const PI = 3.1415926;
const square = x => x * x;
const math = {
add: add,
PI: PI,
square: square
}
module.exports = math;
```
* app.js
```javascript=
const {PI, square} = require("./math");
console.log(PI);
console.log(square(9));
```
* 執行 / 結果
```
> node app.js
3.1415926
81
```
## 2. Requiring A Directory
要如何在目錄外載入目錄內的模組。
****
==範例==
先來看看目錄與檔案的關係：
```
shelter
﹂blue.js
﹂janet.js
﹂sadie.js
﹂index.js
app.js
```
* blue.js
```javascript=
module.exports = {
name: "blue",
color: "grey"
}
```
* janet.js
```javascript=
module.exports = {
name: "janet",
color: "orange"
}
```
* sadie.js
```javascript=
module.exports = {
name: "sadie",
color: "black"
}
```
* index.js
```javascript=
const blue = require("./blue");
const janet = require("./janet");
const sadie = require("./sadie");
const allCats = [blue, janet, sadie];
module.exports = allCats;
```
* app.js
```javascript=
const cats = require("./shelter")
console.log("Require an entire directory!", cats)
```
* 執行 / 結果
執行app.js，會連結到shelter這個資料夾，接著程式會去尋找shelter資料夾中是否有對應的module.exports。
```
> node app.js
Require an entire directory! [
{ name: 'blue', color: 'grey' },
{ name: 'janet', color: 'orange' },
{ name: 'sadie', color: 'black' }
]
```
## 3. NPM：Installing Packages - Jokes & Rainbow
> [npm 不同可下載之package](https://www.npmjs.com/)
****
==問題==
npm install後，資料夾是空的。
==解決==
先打npm init即可。
* 用到的模組：
1. [give me a joke](https://www.npmjs.com/package/give-me-a-joke)
2. [colors](https://www.npmjs.com/package/colors)
## 4. Adding global package
==問題==
當使用npm install -g `<package>`時，會看到error
==解決==
> 參考網址：
> 1. [NPM - 解決套件全域安裝錯誤 Missing write access（Mac ）](https://dotblogs.com.tw/explooosion/2020/07/18/105744)
> 2. [How to fix the "Missing write access" error when using npm](https://flaviocopes.com/npm-fix-missing-write-access-error/)
==問題==
不過還是出現錯誤
==解決==
解決方法是npm install -g `<package>`前方加上sudo：
```
sudo npm install -g <package>
```
## 5. The all important package json
首先可以先打以下指令：
```
npm init
```
在打入 NPM init 後，會被要求輸入幾個欄位，結束後，你可以看到這個資料夾底下，新增了一個 Package.json。
> 參考網址：[史上最強套件管理 - NPM ， npm init 與 npm install (Day11)](https://ithelp.ithome.com.tw/articles/10191682)
## 6. Installing All Dependencies For A Project
==問題==
假如要從別人的github上下載專案下來，你可以先發現他裡面的package.json是有載入其他模組的，但裡面卻沒有附加node_module這檔案。
> 這裡以此檔案為例：[node-group-chat](https://github.com/dkhd/node-group-chat)
>
==解決==
當然可以看著他的package.json裡有載入什麼模組，一個一個去npm install下來，不過不只很麻煩之外，還可能載到不同版本的模組。
所以其實只要在terminal中輸入以下指令：
```
npm install
```
他就會自動把package.json中有的模組全部一次下載下來。
## 7. Language Guesser Challenge
> 模組：
> 1. [franc](https://github.com/wooorm/franc)
> 2. [langs](https://github.com/adlawson/nodejs-langs)
==問題==
nodejs版本太舊，以至於無法使用刻意下載的模組
==解決==
> 參考網址：[Linux作業系統如何安裝最新或是指定版本的Node.js？](https://magiclen.org/linux-install-nodejs/)
利用n-install
==問題==
執行import {franc, francAll} from 'franc'時，node.js出了以下問題：
SyntaxError：Cannot use import statement outside a module
==解決==
> 參考網址：[Node.js SyntaxError：Cannot use import statement outside a module](https://blog.twtnn.com/2021/05/nodejs-syntaxerrorcannot-use-import.html)
修改package.json，增加語法：
```javascript=
"type": "module"
```
==問題==
什麼是process.argv?
==解決==
用於在命令行中運行時獲取傳遞給node.js流程的參數
> 參考網址：[node.js process.argv用法及代碼示例](https://vimsky.com/zh-tw/examples/usage/node-js-process-argv-property.html)
Sign in with Wallet
Connect another wallet