前端奇怪的專業(yè)名詞
NPM 的思路大概是這樣的:
- 買個(gè)服務(wù)器作為代碼倉庫(registry),在里面放所有需要被共享的代碼
- 發(fā)郵件通知 jQuery调煎、Bootstrap捞附、Underscore 作者使用 npm publish 把代碼提交到 registry 上泛释,分別取名 jquery、bootstrap 和 underscore(注意大小寫)
- 社區(qū)里的其他人如果想使用這些代碼甚带,就把 jquery她肯、bootstrap 和 underscore 寫到 package.json 里佳头,然后運(yùn)行 npm install ,npm 就會(huì)幫他們下載代碼
- 下載完的代碼出現(xiàn)在 node_modules 目錄里晴氨,可以隨意使用了康嘉。這些可以被使用的代碼被叫做「包」(package),這就是 NPM 名字的由來:Node Package(包) Manager(管理器)籽前。
saaz 通知 jQuery 作者 John Resig亭珍,他會(huì)答應(yīng)嗎?這事兒不一定啊枝哄,對(duì)不對(duì)肄梨。只有社區(qū)里的人都覺得 「npm 是個(gè)寶」的時(shí)候,John Resig 才會(huì)考慮使用 npm挠锥。那么 npm 是怎么火的呢众羡?npm 的發(fā)展是跟 Node.js 的發(fā)展相輔相成的。Node.js 是由一個(gè)在德國(guó)工作的美國(guó)程序員 Ryan Dahl 寫的蓖租。他寫了 Node.js粱侣,但是 Node.js 缺少一個(gè)包管理器,于是他和 npm 的作者一拍即合蓖宦、抱團(tuán)取暖齐婴,最終 Node.js 內(nèi)置了 npm。后來的事情大家都知道稠茂,Node.js 火了柠偶。隨著 Node.js 的火爆,大家開始用 npm 來共享 JS 代碼了主慰,于是 jQuery 作者也將 jQuery 發(fā)布到 npm 了嚣州。所以現(xiàn)在鲫售,你可以使用 npm install jquery 來下載 jQuery 代碼」猜荩現(xiàn)在用 npm 來分享代碼已經(jīng)成了前端的標(biāo)配。
Windows用戶搜索 node-sass 安裝出錯(cuò),然后找淘寶鏡像,然后下載安裝
下載直接就用mv main.css main.scss 這是把css文件翻譯成scss文件,不過瀏覽器不認(rèn)識(shí)scss文件
所以我們一般都是直接翻譯main.css文件// node-sass main.css 完了~ sass就是這么簡(jiǎn)單
還有一點(diǎn),想在監(jiān)聽狀態(tài)下刷新頁面,就要用sass 的 "-w"語法
babel就是翻譯es6語法的自動(dòng)化工具
babel很變態(tài),是局部安裝的
全局安裝和項(xiàng)目安裝的區(qū)別:在于目錄的區(qū)別,沒有-g全局安裝,就是安裝在當(dāng)前目錄下面
babel就是一句話
//babel src -d lib
把src目錄下的JavaScriptES6版本代碼翻譯成低版本能讓ie智障閱讀的JavaScript代碼,并且放在lib文件夾里面
模塊化文件
src未翻譯代碼
dist發(fā)布代碼
vendors 第三方代碼
node_Modules 第三方包
//前端為什么要打包工具呢?
因?yàn)榍岸硕喽s~
語言多
工具多
變化多
那么就亂,需要一個(gè)東西打包帶走你~
666
但問題在于情竹,一旦js文件以<script src="">的形式插入html藐不,那么require、export秦效、import之類的模塊語法就會(huì)報(bào)錯(cuò)雏蛮,因?yàn)闉g覽器不支持模塊化,模塊語法是建立在node的環(huán)境下才有的阱州。webpack等打包工具的一個(gè)作用就是讓我們插入一個(gè)script標(biāo)簽的同時(shí)挑秉,還允許我們?cè)趈s文件之間使用export、import苔货、require這些語法犀概,并且非常智能地把這些js模塊合并壓縮成1個(gè)(或2個(gè)或以上)大大的緊實(shí)的js文件立哑。