最近開始接觸整個vue生態(tài),準(zhǔn)備直接上手vue的cli,直接入手前端框架的使用,這樣就有必要先理解些基礎(chǔ)
工具,比如node和npm以及webpack
webpack web項目的打包工具
webpack可以將前端各種資源（包括CSS及其預(yù)編譯方案惧浴、JS及其預(yù)編譯方案）統(tǒng)一打包為.js文件和資源文件拄踪。
webpack.png
前端項目會有各種復(fù)雜的依賴,包括scss less 各種各樣依賴的js,這個時候用webpack 就可以順利的將各種各樣的依賴打包成幾個文件
webpack可以支持引入的符合CommonJs的js包打包這樣和node包結(jié)合起來了
node 和 npm
Node是javascript語言在服務(wù)端運行的環(huán)境,據(jù)阮一峰老師講
js通過node在服務(wù)器運行,node像是js的虛擬機(jī),同時node提供大量的工具與操作系統(tǒng)互動這個意義上Node又是js的工具庫
node.js作為一個后端的腳本語言,必定有大量的開源第三方庫來支持它,npm 就是來node的包管理工具,node的包就是實現(xiàn)了commonJS組織方式的js代碼,可以直接引入到j(luò)s文件在中,利用其node 的require引入這就實現(xiàn)了現(xiàn)成輪子的應(yīng)用.
npm包用在前端代碼中
npm 不僅僅是node 的包管理工具,應(yīng)該是整個js 的包管理工具,越來越多的前端代碼發(fā)布到npm上,前端開發(fā)也越來越依賴于node帶來的整個生態(tài),比如各種各樣的工具,由于CommonJS在前端開發(fā)中應(yīng)用的成熟贯底，復(fù)用node的代碼成為可能（且越來越方便）
既然webpack支持在前端使用CommonJS模塊規(guī)范,意味著我們可以直接在前端代碼中使用npm的模塊
npm不僅僅是node的包管理工具,是整個js生態(tài)的包管理工具
package.json npm命令起作用的關(guān)鍵
每個項目的根目錄下面，一般都有一個package.json文件皱卓，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱紊扬、版本睛榄、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個配置文件落剪，自動下載所需的模塊溅漾，也就是配置項目所需的運行和開發(fā)環(huán)境
- npm install 會安裝package.json里面的相關(guān)依賴(另:如果要安裝package.json里面沒有的包則需要npm install package_name --save安裝,--save則是將其寫入package.json文件)
- scripts 指定運行腳本命令的npm縮寫
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
vue中會有如上配置,npm run dev 就會對應(yīng)執(zhí)行后面的命令 npm run start就會執(zhí)行 npm run dev ,npm run build 會執(zhí)行相應(yīng)的node命令
- dependencies字段,指定項目運行所需要的模塊，devDependencies字段,指定項目開發(fā)所需要的模塊
- npm 全局安裝和局部安裝 加了-g 或 --global就是全局安裝,安裝在node文件夾下,可以在命令行里直接調(diào)用.如果不加,是局部安裝 則會在當(dāng)前文件夾里增加一個node_modules文件夾,里面是相關(guān)的包,可以在項目中直接require調(diào)用
