使用SASS妙真、Babel命令行

1. 工程化：我們需要對(duì)之前沒有任何分工的代碼進(jìn)行自動(dòng)化幢尚，模塊化以及性能優(yōu)化
2. 我們之前寫CSS的時(shí)候，使用的是CSS陷嘴，能不能直接使用SASS？
   • SASS又叫SCSS间坐，是一種更厲害的CSS編寫方式
   • SASS是Ruby社區(qū)發(fā)明的語言
   • 安裝：
     • 安裝的時(shí)候使用全局安裝：npm i -g node-sass
     • 安裝結(jié)束灾挨，可以查看版本看看是否安裝成功：node-sass -v
     • image.png
3. 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ū)別
4. SCSS語法使用1
   1. 嵌套規(guī)則：選擇器可以嵌套到大括號(hào)里面使用
      • image.png
      • 我們?cè)俅芜\(yùn)行翻譯文件竹宋，會(huì)將原先省略的部分全部添上劳澄，即便還是有縮進(jìn)，但其實(shí)分成了一個(gè)一個(gè)獨(dú)立的塊
      • image.png
   2. 為什么又有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
5. HTML中引用的只能是純CSS文件

6. 我們發(fā)現(xiàn)我們每次寫一句話都非常麻煩宪潮，需要將SCSS文件轉(zhuǎn)成CSS文件，否則沒有效果趣苏，我們想著能不能自動(dòng)翻譯狡相，這里我們需要使用-w

   
   
   image.png

7. 我們使用：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
8. SASS的第一個(gè)門檻是命令行
9. Babel：將ES6語法轉(zhuǎn)換成ES5語法，比如IE不支持let語法单绑，可以使用Babel回官，是一種命令行，https://babeljs.io/
   
   image.png
   
   
   image.png

10. 運(yùn)行安裝之前搂橙，需要運(yùn)行npm init歉提，這個(gè)用于創(chuàng)建合法的package.json

    
    
    image.png
11. 安裝操作的網(wǎng)址在：https://babeljs.io/en/setup/#installation，選擇CIL（命令行）

12. 當(dāng)我們運(yùn)行npm，其實(shí)就是運(yùn)行上面的build里面的babel src -d lib

    
    
    image.png
13. 我們?yōu)槭裁催\(yùn)行會(huì)出錯(cuò)呢苔巨？因?yàn)閎abel是局部安裝版扩，我們安裝到的是./node_modules/.bin/babel

14. 我們需要這么運(yùn)行，./node_modules/.bin/babel src -d lib侄泽，這句話的意思就是將src里面的js全部翻譯成IE可以使用的JS礁芦，放入-d后面這個(gè)目錄中，通常這個(gè)目錄我們使用dist

    
    
    image.png
    
    
    image.png
15. 全局安裝與項(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í)候要加上具體路徑
16. 我們碰到一個(gè)跟寫SCSS一樣的問題舷胜，就是當(dāng)用戶更改JS文件之后娩践，能否進(jìn)行自動(dòng)轉(zhuǎn)換呢？加一個(gè)--watch就好了
17. 使用命令行：./node_modules/.bin/babel js -d dist --watch

使用更多命令行

1. 我們的代碼分成四個(gè)部分
   • src烹骨，全稱source翻伺，存放未經(jīng)翻譯的代碼
   • dist，全稱distribution沮焕，存放發(fā)布代碼
   • vendors吨岭，全稱vendors，存放第三方代碼
   • node_modules峦树，第三方代碼辣辫，放nodejs
   • image.png
2. 工程化這個(gè)事情完全是用命令行來做的
3. 我們發(fā)現(xiàn)所有的src都要拷到dist里面去

4. 我們可以監(jiān)聽index.html的，如果index.html發(fā)生變化就將index.html拷貝到dist里面去

   
   
   image.png
   
   
   image.png

5. 我們最終需要使用命令行開啟三個(gè)監(jiān)聽魁巩，node-sass監(jiān)聽CSS變化急灭，babel監(jiān)聽JS變化，watch監(jiān)聽index.html的變化和img圖片的變化

   
   
   image.png
6. 總結(jié)：
   1. 有的人喜歡寫的CSS和JS版本不一樣谷遂，我們可以通過翻譯工具葬馋，翻譯成一種

   2. 緩存，假設(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來代替這些命令行

1. 前端為什么需要這么多工具呢铸屉？

   • 前端的語言比較多，CSS/JS/Html/img/svg等切端，語言多彻坛。
   • 第二個(gè)原因是變化快：CSS-Less-SASS-SCSS，后來又出現(xiàn)Stylus（兼容less和sass）
   • image.png

2. 這種情況下webpack出現(xiàn)了：https://github.com/webpack/webpack

3. 我們?cè)谑褂脀ebpack之前需要將package.json回歸初始狀態(tài)踏枣，可以刪掉昌屉，然后npm -y init

4. 運(yùn)行安裝webpack：npm install webpack webpack-cli --save-dev

5. 安裝成功之后，package.json就會(huì)出現(xiàn)一個(gè)依賴庫(kù)茵瀑，然后node_modules/.bin/下面就會(huì)有一個(gè)webpack

   
   
   image.png

6. 我們照著操作间驮，然后創(chuàng)建配置文件，我們猜測(cè)這個(gè)的意思就是將src中的index.js文件加工輸出到dist中的main.js

   
   
   image.png

7. 寫好這個(gè)配置文件之后马昨，我們運(yùn)行一下這個(gè)webpack竞帽，但是每次都帶上目錄好麻煩，使用簡(jiǎn)寫：npx webpack鸿捧，npx就是用來找本地目錄的webpack

8. 運(yùn)行之后屹篓，我們發(fā)現(xiàn)dist目錄下出現(xiàn)了main.js，并且里面添加了很多js語法匙奴，說明webpack將一些語法放到這個(gè)文件里面了

   
   
   image.png

9. 原先的代碼還在里面堆巧，新添加的那些代碼就是為了在運(yùn)行的之后，進(jìn)行翻譯

10. lodash可以了解下

11. 在后臺(tái)泼菌，webpack實(shí)際上是“轉(zhuǎn)碼”代碼谍肤，以便較舊的瀏覽器也可以運(yùn)行它。

12. 所有的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命令颁糟。

13. 我們需要有一個(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'
      }};
    

14. 我們可以在webpack中使用sass將SCSS轉(zhuǎn)換成css箕肃，使用babel將js進(jìn)行轉(zhuǎn)換婚脱。webpack中有很多插件，可以實(shí)現(xiàn)相關(guān)目標(biāo)勺像。安裝的過程中障贸，需要更改配置文件。

15. 概念：

    • 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語法。

16. 這種時(shí)候試著去看看文檔鸵鸥。

17. webpack支持通過加載程序以多種語言和預(yù)處理器編寫的模塊奠滑。加載程序向webpack描述了如何處理非JavaScript模塊，并將這些依賴項(xiàng)包含在包中妒穴。

18. webpack社區(qū)已經(jīng)為各種流行語言和語言處理器構(gòu)建了loader宋税，包括

    • CoffeeScript
    • TypeScript
    • ESNext (Babel)
    • Sass
    • Less
    • Stylus
    • Elm

19. 總體而言，webpack提供了一種功能強(qiáng)大且豐富的自定義API讼油，該API允許一個(gè)人將webpack用于任何堆棧杰赛，而不必?fù)?dān)心開發(fā)，測(cè)試和生產(chǎn)工作流程矮台。

20. webpack是可以在js文件中導(dǎo)入CSS的

    • image.png
    • 這可以支持可以將“ ./style.css”導(dǎo)入依賴于該樣式的文件中
    • 也就是現(xiàn)在我們不需要寫style標(biāo)簽乏屯，只要引用文件就好了
    • image.png
    • 我們打開dist里面的網(wǎng)頁(yè)，看到樣式變化了
    • image.png

21. webpack可以使用file-loader合并文件瘦赫，如圖片等辰晕，現(xiàn)在圖片也是可以導(dǎo)入的，即import

    • image.png
    • 上面的圖片可以引入到JS中
    • 還可以作為路徑引入到html標(biāo)簽中确虱，作為背景圖片
    • image.png
    • image.png
    • file-loader加載程序獲取通過它們加載的任何文件含友，并將其輸出到構(gòu)建目錄。這意味著我們可以將它們用于任何類型的文件校辩，包括字體窘问。

22. 數(shù)據(jù)也可以被加載

23. 可以了解一下d3

24. 多個(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'),
      },
    };
    

25. HtmlWebpackPlugin默認(rèn)會(huì)生成index.html文件，也就是如果存在這個(gè)文件故黑，就會(huì)覆蓋之前的文件儿咱，但是新生成的這個(gè)文件會(huì)將所有bundle后的文件引用到頁(yè)面中

26. webpack跟蹤被使用的文件，將未使用的文件自動(dòng)清除倍阐，使用clean-webpack-plugin

    
    
    image.png

27. webpack的開發(fā)模式概疆，可以使用追錯(cuò)的devtool

28. 可以實(shí)現(xiàn)自動(dòng)編譯逗威，通常使用webpack-dev-server峰搪，這個(gè)插件實(shí)現(xiàn)了自動(dòng)變異，以及網(wǎng)頁(yè)自動(dòng)刷新

29. webpack可以使用多個(gè)config文件凯旭，文件可以實(shí)現(xiàn)繼承概耻，使用導(dǎo)入以及...操作即可使套。