使用SASS妙真、Babel命令行
- 工程化:我們需要對(duì)之前沒有任何分工的代碼進(jìn)行自動(dòng)化幢尚,模塊化以及性能優(yōu)化
- 我們之前寫CSS的時(shí)候,使用的是CSS陷嘴,能不能直接使用SASS?
- SASS又叫SCSS间坐,是一種更厲害的CSS編寫方式
- SASS是Ruby社區(qū)發(fā)明的語言
- 安裝:
- 安裝的時(shí)候使用全局安裝:npm i -g node-sass
- 安裝結(jié)束灾挨,可以查看版本看看是否安裝成功:node-sass -v
- image.png
- SCSS的使用方式
- 直接將文件中的main.css改成main.scss:mv main.css main.scss
- SCSS是完全兼容CSS語法的。只是在CSS的基礎(chǔ)之上增加一些更高級(jí)的語法
- 使用的方式直接跟著抄就好了
- image.png
- 我們將SCSS文件翻譯成CSS文件:node-sass scss文件名 css文件名
- image.png
- 此時(shí)兩個(gè)文件沒有多大區(qū)別
- SCSS語法使用1
- 嵌套規(guī)則:選擇器可以嵌套到大括號(hào)里面使用
- image.png
- 我們?cè)俅芜\(yùn)行翻譯文件竹宋,會(huì)將原先省略的部分全部添上劳澄,即便還是有縮進(jìn),但其實(shí)分成了一個(gè)一個(gè)獨(dú)立的塊
- image.png
- 為什么又有SASS又有SCSS逝撬?
- 本來Ruby社區(qū)發(fā)明的SASS相當(dāng)簡(jiǎn)潔
- image.png
- image.png
- image.png
- image.png
- 但是前端說看不懂浴骂,非得添加上括號(hào)乓土,于是Ruby在SASS的基礎(chǔ)上發(fā)明了SCSS
- image.png
- 嵌套規(guī)則:選擇器可以嵌套到大括號(hào)里面使用
- HTML中引用的只能是純CSS文件
-
我們發(fā)現(xiàn)我們每次寫一句話都非常麻煩宪潮,需要將SCSS文件轉(zhuǎn)成CSS文件,否則沒有效果趣苏,我們想著能不能自動(dòng)翻譯狡相,這里我們需要使用-w
image.png -
我們使用:node-scss main.scss main.css -w main.scss,來監(jiān)聽main.scss食磕,一旦這個(gè)文件發(fā)生變化(文件的變化方式甚至可以使用echo命令行來實(shí)現(xiàn))尽棕,就執(zhí)行前面的文件,這個(gè)就是一個(gè)自動(dòng)化的過程彬伦,不用等我們?nèi)マD(zhuǎn)換滔悉,自動(dòng)轉(zhuǎn)換
image.png - SASS的第一個(gè)門檻是命令行
- Babel:將ES6語法轉(zhuǎn)換成ES5語法,比如IE不支持let語法单绑,可以使用Babel回官,是一種命令行,https://babeljs.io/
image.png
image.png -
運(yùn)行安裝之前搂橙,需要運(yùn)行npm init歉提,這個(gè)用于創(chuàng)建合法的package.json
image.png - 安裝操作的網(wǎng)址在:https://babeljs.io/en/setup/#installation,選擇CIL(命令行)
-
當(dāng)我們運(yùn)行npm,其實(shí)就是運(yùn)行上面的build里面的babel src -d lib
image.png - 我們?yōu)槭裁催\(yùn)行會(huì)出錯(cuò)呢苔巨?因?yàn)閎abel是局部安裝版扩,我們安裝到的是./node_modules/.bin/babel
-
我們需要這么運(yùn)行,./node_modules/.bin/babel src -d lib侄泽,這句話的意思就是將src里面的js全部翻譯成IE可以使用的JS礁芦,放入-d后面這個(gè)目錄中,通常這個(gè)目錄我們使用dist
image.png
image.png - 全局安裝與項(xiàng)目安裝的區(qū)別
- npm install -g http-server:屬于全局安裝蔬顾,安裝之后就可以在任意文件夾中使用這個(gè)http-server宴偿,因?yàn)榘惭b到全局目錄下了,這個(gè)全局目錄包含在在PATH里面
- npm install http-server:屬于局部安裝诀豁,只能在當(dāng)前目錄使用窄刘,安裝在當(dāng)前目錄下,使用的時(shí)候要加上具體路徑
- 我們碰到一個(gè)跟寫SCSS一樣的問題舷胜,就是當(dāng)用戶更改JS文件之后娩践,能否進(jìn)行自動(dòng)轉(zhuǎn)換呢?加一個(gè)--watch就好了
- 使用命令行:./node_modules/.bin/babel js -d dist --watch
使用更多命令行
- 我們的代碼分成四個(gè)部分
- src烹骨,全稱source翻伺,存放未經(jīng)翻譯的代碼
- dist,全稱distribution沮焕,存放發(fā)布代碼
- vendors吨岭,全稱vendors,存放第三方代碼
- node_modules峦树,第三方代碼辣辫,放nodejs
- image.png
- 工程化這個(gè)事情完全是用命令行來做的
- 我們發(fā)現(xiàn)所有的src都要拷到dist里面去
-
我們可以監(jiān)聽index.html的,如果index.html發(fā)生變化就將index.html拷貝到dist里面去
image.png
image.png -
我們最終需要使用命令行開啟三個(gè)監(jiān)聽魁巩,node-sass監(jiān)聽CSS變化急灭,babel監(jiān)聽JS變化,watch監(jiān)聽index.html的變化和img圖片的變化
image.png - 總結(jié):
- 有的人喜歡寫的CSS和JS版本不一樣谷遂,我們可以通過翻譯工具葬馋,翻譯成一種
-
緩存,假設(shè)我們發(fā)布了一個(gè)網(wǎng)頁(yè)肾扰,需要在每一個(gè)CSS后面加一個(gè)?v=1這樣的標(biāo)識(shí)畴嘶,因?yàn)槲覀兊腃SS做了很長(zhǎng)時(shí)間的緩存;一旦我們改了這個(gè)CSS集晚,我們希望這個(gè)端口號(hào)可以更改窗悯,以便客戶端更新緩存。前端在nodejs誕生之后想了各種方法來代替我們開的那幾個(gè)監(jiān)聽窗口甩恼;一開始的工具叫做Grunt蟀瞧,后來Gulp替代了Grunt(比較快)沉颂,后來webpack替代了Gulp。就是將命令行工具統(tǒng)一成一個(gè)工具悦污。
image.png
用webpack來代替這些命令行
-
前端為什么需要這么多工具呢铸屉?
- 前端的語言比較多,CSS/JS/Html/img/svg等切端,語言多彻坛。
- 第二個(gè)原因是變化快:CSS-Less-SASS-SCSS,后來又出現(xiàn)Stylus(兼容less和sass)
- image.png
這種情況下webpack出現(xiàn)了:https://github.com/webpack/webpack
我們?cè)谑褂脀ebpack之前需要將package.json回歸初始狀態(tài)踏枣,可以刪掉昌屉,然后npm -y init
運(yùn)行安裝webpack:npm install webpack webpack-cli --save-dev
-
安裝成功之后,package.json就會(huì)出現(xiàn)一個(gè)依賴庫(kù)茵瀑,然后node_modules/.bin/下面就會(huì)有一個(gè)webpack
image.png -
我們照著操作间驮,然后創(chuàng)建配置文件,我們猜測(cè)這個(gè)的意思就是將src中的index.js文件加工輸出到dist中的main.js
image.png 寫好這個(gè)配置文件之后马昨,我們運(yùn)行一下這個(gè)webpack竞帽,但是每次都帶上目錄好麻煩,使用簡(jiǎn)寫:npx webpack鸿捧,npx就是用來找本地目錄的webpack
-
運(yùn)行之后屹篓,我們發(fā)現(xiàn)dist目錄下出現(xiàn)了main.js,并且里面添加了很多js語法匙奴,說明webpack將一些語法放到這個(gè)文件里面了
image.png 原先的代碼還在里面堆巧,新添加的那些代碼就是為了在運(yùn)行的之后,進(jìn)行翻譯
lodash可以了解下
在后臺(tái)泼菌,webpack實(shí)際上是“轉(zhuǎn)碼”代碼谍肤,以便較舊的瀏覽器也可以運(yùn)行它。
-
所有的JS文件都寫成模塊化的狀態(tài)灶轰,然后再入口JS那邊導(dǎo)入并運(yùn)行就好了
- 我們有一個(gè)index.js作為整個(gè)html的唯一引用的我們寫的JS文件谣沸,其余JS文件全部封裝成模塊刷钢,導(dǎo)入到index.js文件中
- image.png
- 有關(guān)export default function 和 export function 的區(qū)別
- image.png
- 第一組是使用 export default 時(shí),對(duì)應(yīng)的 import 語句不需要使用大括號(hào)。
- 第二組是不使用 export default 時(shí)臂外,對(duì)應(yīng)的 import 語句需要使用大括號(hào)碰缔。
- export default命令用于指定模塊的默認(rèn)輸出。
- 顯然阱缓,一個(gè)模塊只能有一個(gè)默認(rèn)輸出非凌,因此export default命令只能使用一次。
- 所以荆针,import命令后面才不用加大括號(hào)敞嗡,因?yàn)橹豢赡芪ㄒ粚?duì)應(yīng)export default命令颁糟。
-
我們需要有一個(gè)配置文件,指明每次需要進(jìn)行轉(zhuǎn)化的文件喉悴,下面這個(gè)文件的意思就是將./src/index.js作為入口文件棱貌,加工一下變成dist/bundle.js,然后我們?cè)趆tml中引入的就是這個(gè)bundle.js文件
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }};
我們可以在webpack中使用sass將SCSS轉(zhuǎn)換成css箕肃,使用babel將js進(jìn)行轉(zhuǎn)換婚脱。webpack中有很多插件,可以實(shí)現(xiàn)相關(guān)目標(biāo)勺像。安裝的過程中障贸,需要更改配置文件。
-
概念:
- Entry:是一個(gè)入口文件吟宦,用于構(gòu)建轉(zhuǎn)換的基礎(chǔ)文件篮洁,一般會(huì)是一個(gè)JS文件,將其余JS文件以模塊的形式導(dǎo)入到這個(gè)入口JS文件里面殃姓,JS文件中使用import導(dǎo)入的文件嘀粱,可以是任何文件。導(dǎo)入任何類型的模塊辰狡,例如.css文件是Webpack特有的功能锋叨,其他捆綁程序或任務(wù)運(yùn)行程序可能不支持。入口文件可以多個(gè)宛篇,但是出口文件只能有一個(gè)
- Output:是指明經(jīng)過加工的文件娃磺,放到哪里,叫什么名字叫倍。
- Loader:webpack只能理解JavaScript和JSON文件偷卧,而Loader可以轉(zhuǎn)換其他文件,如將SCSS文件轉(zhuǎn)成CSS(之前的SASS功能)吆倦,ES6語法轉(zhuǎn)ES5語法等(就是之前的Babel功能)听诸。
- test:用于確定轉(zhuǎn)換的文件格式
- use:指明執(zhí)行轉(zhuǎn)換的loader,不同的文件轉(zhuǎn)換需要不同的loader
- image.png
- 就相當(dāng)于告訴webpack蚕泽,當(dāng)你碰到import或者require使用的txt文件的時(shí)候晌梨,請(qǐng)使用raw-loader進(jìn)行轉(zhuǎn)換,文件名稱可以使用正則
- Plugins:插件可以執(zhí)行比loader更廣泛的任務(wù)须妻,如捆綁優(yōu)化仔蝌,資產(chǎn)管理和環(huán)境變量注入。
- 使用plugins的時(shí)候荒吏,需要使用require將對(duì)應(yīng)的plugin加入到plugins數(shù)組中
- image.png
- Mode:模式敛惊,通過將mode參數(shù)設(shè)置為development,production或none绰更,可以啟用與每個(gè)環(huán)境相對(duì)應(yīng)的webpack內(nèi)置優(yōu)化瞧挤。锡宋,默認(rèn)是produnction
- image.png
- Browser Compatibility,瀏覽器兼容性特恬,webpack支持所有的支持ES5的瀏覽器(IE8不支持)员辩。webpack需要支持Promise語法。
這種時(shí)候試著去看看文檔鸵鸥。
webpack支持通過加載程序以多種語言和預(yù)處理器編寫的模塊奠滑。加載程序向webpack描述了如何處理非JavaScript模塊,并將這些依賴項(xiàng)包含在包中妒穴。
-
webpack社區(qū)已經(jīng)為各種流行語言和語言處理器構(gòu)建了loader宋税,包括
- CoffeeScript
- TypeScript
- ESNext (Babel)
- Sass
- Less
- Stylus
- Elm
總體而言,webpack提供了一種功能強(qiáng)大且豐富的自定義API讼油,該API允許一個(gè)人將webpack用于任何堆棧杰赛,而不必?fù)?dān)心開發(fā),測(cè)試和生產(chǎn)工作流程矮台。
-
webpack是可以在js文件中導(dǎo)入CSS的
- image.png
- 這可以支持可以將“ ./style.css”導(dǎo)入依賴于該樣式的文件中
- 也就是現(xiàn)在我們不需要寫style標(biāo)簽乏屯,只要引用文件就好了
- image.png
- 我們打開dist里面的網(wǎng)頁(yè),看到樣式變化了
- image.png
-
webpack可以使用file-loader合并文件瘦赫,如圖片等辰晕,現(xiàn)在圖片也是可以導(dǎo)入的,即import
- image.png
- 上面的圖片可以引入到JS中
- 還可以作為路徑引入到html標(biāo)簽中确虱,作為背景圖片
- image.png
- image.png
- file-loader加載程序獲取通過它們加載的任何文件含友,并將其輸出到構(gòu)建目錄。這意味著我們可以將它們用于任何類型的文件校辩,包括字體窘问。
數(shù)據(jù)也可以被加載
可以了解一下d3
-
多個(gè)輸入,多個(gè)輸出宜咒,最終我們輸出的文件有app.bundle.js以及print.bundle.js惠赫,這個(gè)name就是指entry內(nèi)部各個(gè)鍵的名稱
const path = require('path'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, };
HtmlWebpackPlugin默認(rèn)會(huì)生成index.html文件,也就是如果存在這個(gè)文件故黑,就會(huì)覆蓋之前的文件儿咱,但是新生成的這個(gè)文件會(huì)將所有bundle后的文件引用到頁(yè)面中
-
webpack跟蹤被使用的文件,將未使用的文件自動(dòng)清除倍阐,使用clean-webpack-plugin
image.png webpack的開發(fā)模式概疆,可以使用追錯(cuò)的devtool
可以實(shí)現(xiàn)自動(dòng)編譯逗威,通常使用webpack-dev-server峰搪,這個(gè)插件實(shí)現(xiàn)了自動(dòng)變異,以及網(wǎng)頁(yè)自動(dòng)刷新
webpack可以使用多個(gè)config文件凯旭,文件可以實(shí)現(xiàn)繼承概耻,使用導(dǎo)入以及...操作即可使套。