npm 全稱 node package manager，是 js 的包管理工具，開發人員可以把寫好的框架、庫發布到 npm 上，使用者在使用時候就可很方便地通過 npm 來下載，只要在 npm官網 有的包，就可通過 npm install 包名 下載，包名都是唯一的不會重復
npm 與 nodejs 共同發布，所以在 nodejs官網 下載安裝了 nodejs 后就可直接在命令行中使用 npm。通過查看版本檢查兩者是否安裝成功
因為 npm 的更新頻率更快，所以可單獨更新 npm
npm install npm --global //--global為全局安裝,可簡寫為--g
由於我的 nodejs 是用的舊版本，所以導致更新 npm 時出錯
，去官網下載了最新版 nodejs 后問題解決
package.json
package.json 是包描述文件，存儲着包的信息（包名、版本、項目的依賴項），最好每個項目都要有個 package.json 文件，就像產品說明書
此文件可自己普通文本改名的方式創建，但一般是 npm 命令創建，在當前目錄打開命令行輸入 npm init
運行此命令后，會以向導的方式填寫包的信息，不想填的話可回車略過。也可使用 npm init --yes 命令直接快速創建，最后根據需要修改創建好的 package.json 文件即可
建議執行 npm install 包名 時加上--save，會在 package.json 的 dependencies 屬性添加依賴項，保存第三方包的依賴信息
npm install --save jquery
當依賴包沒有的時候，直接執行 npm install 命令，則會根據當前目錄的 package.json 文件的 dependencies 里所有依賴項自動全部下載完
npm 常用命令
npm 5 版本之后會自動生成 package-lock.json 文件，並且安裝包的時候都會生成或更新這個文件
安裝包時也不需要加 --save 參數，會自動保存依賴信息
package-lock.json 這個文件會保存 node_modules 中所有包的信息（版本、下載地址），這樣的話重新 npm install 的時候速度會更快，另一個作用是鎖定下載的包的版本號，防止自動升級新版
安裝webpack
webpack是模塊打包機，把 css、js、less 等打包成一個總的js文件供瀏覽器使用
webpack 要先進行全局安裝
到了 webpack4，命令行相關的內容都移到 webpack-cli，所以還需要安裝 webpack-cli，否則會出現如下信息
因為 webpack 是全局安裝的，所以 webpack-cli 也要全局安裝
之后可查看 webpack 版本
小Demo
准備就緒，開始寫小案例一個加法計算器，在F盤新建了個文件夾名為 Demo，進入這個空文件夾shift+右鍵選擇 “在此打開命令行” 或 Powershell 窗口
在當前自己的項目里（這里為 Demo 文件夾）安裝局部 webpack
之后Demo文件夾會出現node_modules和package-lock.json
然后使用 npm init 命令初始化一個 package.json ，
之后在Demo下創建兩個文件夾（ src與dist ）和一個空的 js 文件（ webpack.config.js ）
src 存放人可以看懂的源代碼，具備一定的功能划分如MVC
dist 存放真實上線的代碼（減少請求、混淆代碼），機器能看懂
接下來要配置 webpack.config.js，好像涉及到 nodejs 的內容...... 要學習下
var path = require('path'); module.exports = { //指定入口文件
entry: { entry: './src/main.js' }, //指定出口文件.打包生成build.js,如果沒有dist文件夾會自動創建.最好寫絕對路徑，不然會報下圖中的錯誤Invalid configuration object
output: { path: path.join(__dirname,'dist'), filename: 'build.js' }, //模塊,指定加載器,可配置各種加載器,這樣就不擔心less等文件的編譯問題，這里用不到所以沒寫
module: {} };
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="n1"> + <input type="text" id="n2">
<button id="btn">=</button>
<input type="text" id="result">
<script src="../dist/build.js"></script>
</body>
</html>
main.js
//commonjs方式引入cal對象，由於node的模塊作用域，所以必須要導入，之后才能使用這個對象 //var cal = require('./cal.js');
//ES6的模塊方式引入
import cal from './cal.js'; //獲取按鈕
document.getElementById('btn').onclick = function(){ var n1 = document.getElementById('n1').value - 0; var n2 = document.getElementById('n2').value - 0; var sum = cal.add(n1,n2); document.getElementById('result').value = sum; };
cal.js
var cal = { add:function(n1,n2){ return n1 + n2; } }; //commonjs導出方式 //module.exports = cal; //ES6導出方式
export default cal;
最后直接在當前目錄使用 webpack 命令即可完成打包
瀏覽器中效果圖，點擊等號算出結果
npm源
由於npm官網是國外的，所以使用 npm install 命令下載時可能會很慢，這時可使用 淘寶的npm鏡像 ，相當於將官網的內容復制了一份放在國內。使用方式有三種
