前端工程化築基-Node/npm/babel/polyfill/webpack
2022-12-27 12:01:51
00、前端搬磚框架
開發 ⇨ 構建 ⇨ 部署上線 ⇨ 摸魚：
01、Node.js/npm
Node.JS 是一個基於 Chrome V8 引擎 的 JavaScript 執行時環境，不是JS庫（是C++開發的），是用來解釋執行JavaScript 程式碼的。我們開發Web應用中的JavaScript 程式碼都是執行在瀏覽器上，有了Node.JS，就可以用JavaScript 來開發中介軟體、後端服務了。
我們在VSCode中用到的很多元件都是基於Node.JS來開發執行的，如構建工具webpack、vue-cli。
1.1、什麼是npm？
npm（Node Package Manager）為Node.JS的包管理器，用來管理JS元件模組的，包括安裝、解除安裝、管理依賴等。很多語言都有自己的包管理器，如Java的maven、.Net的Nuget等。
npm倉庫(registry)：官方的 npm倉庫 存放了大量的、幾乎所有的 JS元件（輪子）。在這裡，你會發現你不是一個人在戰鬥！大家開源的各種前端元件庫都是釋出到這個集中式的大倉庫裡，使用npm工具就可以從倉庫裡學習（copy）、安裝使用各種元件了。
1.2、什麼是yarn/pnpm?
yarn、pnpm的作用同npm一樣，都是包管理工具，使用方式都比較相似。
- npm：這是Node.js官方自帶的包管理工具，
- yarn：由於早期npm存在一些不完善的問題，於是一些大公司推出了yarn。
- npm完善：受yarn的反向推動，後來npm逐步升級完善。
- pnpm：一個比較新包管理工具，相比npm、yarn，有更好的下載速度、磁碟管理、依賴管理。
1.3、npm命令/設定
NodeJS官網 下載安裝包，安裝Node.JS的時候就自帶npm了，可以直接使用。npm是一個命令列工具，指令都是在cmd命令列工具中執行的，常用指令如下：
| 常用指令 | 說明 |
|---|---|
| node -v | 檢視nodeJS版本，也用來驗證node是否安裝 |
| node | 進入node命令環境，可執行任何JavaScript程式碼了 |
| console.log('hello world') | 在node環境中執行JS程式碼 |
| npm -v | 檢視npm版本 |
| npm install -g <包名稱@版本號> | 安裝一個模組，@可指定版本號，-g 表示全域性安裝。npm install -g vuex@3 |
| npm uninstall <包名稱> | 解除安裝一個模組 |
| npm update <包名稱> | 更新模組 |
| npm list -g | 檢視所有全域性安裝的模組 |
| npm list <包名稱> | 檢視模組的版本資訊，npm list vuex |
| npm init | npm初始化，會生成一個 package.json 檔案 |
| npm install | 自動安裝 package.json 檔案中的模組 |
| npm install -save <包名稱> | 在package檔案的dependencies寫入依賴，用於生產環境。簡寫 npm i -S |
| npm install -save-dev <包名稱> | 在package檔案的devDependencies寫入依賴，開發環境。簡寫：npm i -D |
| npm cache clean -f | 清除快取 |