大前端進階

阿新 • • 發佈：2021-09-06

課程目標

1、前端開發和前端開發工具

2、Nodejs安裝和快速入門

3、Es6的新語法糖

4、Npm包管理器

5、Babel的安裝作用

6、模組化管理

7、Webpack打包和編譯

8、如何快速構建一個nodejs專案vue-admin-element

9、如何快速構建一個nodejs專案antd

01、概述和前端工具vscode安裝

前端開發是建立Web頁面或app等前端介面呈現給使用者的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動 [1] 。它從網頁製作演變而來，名稱上有很明顯的時代特徵。在網際網路的演化程序中，網頁製作是

Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，使用者使用網站的行為也以瀏覽為主。隨著網際網路技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，互動效果顯著，功能更加強大。 [2]

移動網際網路帶來了大量高效能的移動終端裝置以及快速的無線網路，HTML5，node.jS的廣泛應用，各類框架類庫層出不窮。 [1]

當下國內的大部分網際網路公司只有前端工程師和後端工程師，中間層的工作有的由前端來完成，有的由後端來完成。

1.1、下載安裝VScode

下載地址：https://code.visualstudio.com/

1：雙擊開啟vscode安裝包

2: 指定安裝目錄

不建立桌面圖示，（個人喜好）

直接點選【下一步】

點選【安裝】

安裝完畢

1.1.1、中文介面配置

1、首先安裝中文外掛：Chinese (Simplified) Language Pack for Visual Studio Code

2、右下角彈出是否重啟vs，點選“yes”

漢化成功

3、有些機器重啟後如果介面沒有變化，則點選左邊欄Manage -> Command Paletet…【Ctrl+Shift+p】
4、在搜尋框中輸入“configure display language”，回車

5、選擇’zh-cn’

6、重啟vs

1.1.2、外掛安裝

為方便後續開發，建議安裝如下外掛

1.1.3、設定字型大小

頭部檔案-> 首選項->設定-> 搜尋 “fonts” -> Font size

1.1.4、開啟完整的Emmet語法支援

設定中搜索 Emmet：啟用如下選項，必要時重啟vs

1.1.5、檢視

檢視—> 外觀—> 向左移動側邊欄

02、Nodejs

2.1、Nodejs介紹與安裝

目標：瞭解nodejs、並且在本地安裝好這個軟體
官網： http://nodejs.cn/
介紹：

Node 是一個讓 JavaScript 執行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的指令碼語言。  

釋出於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。簡單的說 Node.js 就是執行在服務端的 JavaScript。 Node.js 是一個基於Chrome JavaScript 執行時建立的一個平臺。底層架構是：javascript. 檔案字尾：.js

Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，效能非常好。

下載對應你係統的Node.js版本:
下載地址：https://nodejs.org/zh-cn/download
幫助文件：https://nodejs.org/zh-cn/docs
關於Nodejs：https://nodejs.org/zh-cn/about

安裝預設安裝即可，安裝完成之後，檢視是否安裝成功：

node -v

小結

Nodejs是一門計算機語言，執行在系統中的v8（jvm）引擎中。檔案字尾是 js 執行的命令是：node

2.2.1、快速入門-Hello World

1、建立資料夾 nodejs
2、建立 helloworld.js

類似於java中的System.out.println("")

console.log('Hello World!!!')

執行：node helloworld.js

結果：hello world!!!

3、開啟命令列終端：Ctrl + Shift + y

瀏覽器的核心包括兩部分核心：

DOM渲染引擎；
java script 解析器（js引擎）
js執行在瀏覽器核心中的js引擎內部

小結

Node.js是脫離瀏覽器環境執行的JavaScript程式，基於V8 引擎

2.2.2、Node - 實現請求響應

1、建立httpserver.js;

// 匯入模組是require 就類似於import java.io
const http = require('http');

// 1: 建立一個http服務
http.createServer(function (require, response) {
    // 瀏覽器怎麼認識hello server!!!
    response.writeHead(200,{'Content-type':'text/plain'}) //這句話的含義是：告訴瀏覽器將
    // 以text/plain去解析hello server 這段資料。
    // 給瀏覽器輸出內容
    response.end('<strong>hello server!!!</strong>');
}).listen(8888);
console.log('你啟動的服務是：http://localhost:8888已啟動成功！！');
// 2: 建立一埠8888
// 3: 啟動執行服務 node httpserver.js
// 4: 在瀏覽器訪問http://localhost:8888

2、執行伺服器程式；

node httpserver.js

3、伺服器啟動成功後，在瀏覽器輸入：http://localhost:8888/ 檢視webserver成功執行，並輸出html頁面

4、停止服務：ctrl + c

2.2.3、Node-操作MYSQL資料庫

參考：https://www.npmjs.com/package/mysql

1：安裝mysql依賴

npm install mysql

2：定義db.js進行操作

// 1: 匯入mysql依賴包， mysql屬於第三方的模組就類似於 java.sql一樣的道理
var mysql = require('mysql')

// 1: 建立一個mysql的Connection物件
// 2: 配置資料連線資訊
var connection = mysql.createConnection({
    host:"http://localhost",
    port:"3306",
    user:"root",
    password:"123456",
    database:"school",
})
// 3: 開闢連結
connection.connect();
// 4: 執行crud
connection.query('select * from student',function(error,results,fields){
    // 如果查詢出錯，直接丟擲
    if(error)throw error;
    // 查詢成功
    console.log("results = ",results);
});
// 5: 關閉連線

// 最後一步：執行node db.js 檢視效果

3、建立資料庫school和表student的步驟省略

4、執行db.js

node db.js

PS E:\VSCodeProject\nodejs> node .\db.js
results =  [
  RowDataPacket {
    studentno: 1000,
    loginpwd: '123456',
    studentname: '張偉',
    sex: 0,
    gradeid: 2,
    phone: '13800001234',
    address: '北京朝陽',
    borndate: 1979-12-31T16:00:00.000Z,
    email: '[email protected]',
    identitycard: '123456198001011234'
  },
  RowDataPacket {
    studentno: 1001,
    loginpwd: '123456',
    studentname: '趙強',
    sex: 1,
    gradeid: 3,
    phone: '13800002222',
    address: '廣東深圳',
    borndate: 1989-12-31T16:00:00.000Z,
    email: '[email protected]',
    identitycard: '123456199001011233'
  }
]

03、Es6

3.1、ES6的概述

ECMAScript的快速發展：

程式語言JavaScript是ECMAScript的實現和擴充套件。ECMAScript是由ECMA（一個類似W3C的標準組織）參與進行標準化的語法規範。ECMAScript定義了：

[語言語法] – 語法解析規則、關鍵字、語句、宣告、運算子等。

[型別]– 布林型、數字、字串、物件等。

[原型和繼承]

內建物件和函式的

[標準庫] – [JSON]、[Math]、[陣列方法]、[物件自省方法]等。

ECMAScript標準不定義HTML或CSS的相關功能，也不定義類似DOM（文件物件模型）的[Web API]，這些都在獨立的標準中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景，無論是瀏覽器環境還是類似[node.js]的非瀏覽器環境。

ECMAScript標準的歷史版本分別是1、2、3、5。

那麼為什麼沒有第4版？其實，在過去確實曾計劃釋出提出巨量新特性的第4版，但最終卻因想法太過激進而慘遭廢除（這一版標準中曾經有一個極其複雜的支援泛型和型別推斷的內建靜態型別系統）。

ES4飽受爭議，當標準委員會最終停止開發ES4時，其成員同意釋出一個相對謙和的ES5版本，隨後繼續制定一些更具實質性的新特性。這一明確的協商協議最終命名為“Harmony”，因此，ES5規範中包含這樣兩句話

ECMAScript是一門充滿活力的語言，並在不斷進化中。

未來版本的規範中將持續進行重要的技術改進

2009年釋出的改進版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[嚴格模式]以及[JSON]物件。

ES6: 是JavaScript語言的下一代標準，2015年6月正式釋出。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

小結：

ECMAScript是前端js的語法規範；可以應用在各種js環境中。如：瀏覽器或者node.js環境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js環境中使用這些新特性。

3.2、ES6的語法：let和const命令

變數和常量的嚴格區分。

核心程式碼：

新建01-let和const的定義.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 傳統定義變數和常量的方式 統一使用var
        var name = "廣東學相伴";
        var link = "https://www.kuangstudy.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        // ES6定義的方式
        let name2 = "廣東學相伴太棒了";
        let link2 = "http://www.kuangstudy.com";

        // 定義常量
        const PI2 = Math.PI;
        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>

</body>

</html>

新建02-let-const和var的區別.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // let和const解決
        // 1: var的變數穿透的問題
        // 2: 常量修改的問題
        for(let i=0;i<5;i++){ 
            console.log(i)
        }

        // 這裡就造成變數穿透 編譯
        //console.log(i)

        const PI = Math.PI;
        PI = 100; // 編譯會報錯
        console.log(PI);   
        
        // 在實際開發和生產中，如果是小程式，uniapp或者一些腳手架中，可以大膽的去使用let和const
        // 但是如果你是web開發。建議大家還是使用var. 因為在一些低版本的瀏覽器let和const
    </script>
</body>

</html>

小結
let : 可變變數
const 是常量
var：最原始。

3.3、ES6的語法：模板字串

以前：我們都是使用 ‘’ 或者 “” 來把字串套起來

現在： `` 【反引號】

核心程式碼：

新建03-模板字串.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 字串會牽涉到動態部分
        var person = {
            name: "飛哥",
            address: "廣東學相伴",
            link: "https://www.kuangstudy.com"
        }
        let address = "傳統-我是" + person.name + "，正在" + person.address + "講課，講課的內容會上傳到官網：" + person.link + "平臺上";
        console.log(address);

        // es6的語法 模板字串語法
        let address2 = `ES6-我是${person.name}，
        正在${person.address}講課，講課的內容會上傳到官網：${person.link}
        平臺上`;
        console.log(address2);

    </script>

</body>

</html>

3.4、ES6的語法：函式預設引數與箭頭函式

函式預設引數
在方法的引數後面加上一個預設值即可

核心程式碼
新建04-函式預設引數.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 函式預設引數
        function sum(a = 100, b = 100) {
            return a + b;
        }

        // 執行方法，會用預設值填充，打印出來200
        var result = sum();
        console.log("result = " + result);

        // 覆蓋預設值列印  結果是400    
        var result2 = sum(200, 200);
        console.log("result2 = " + result2);

    </script>
</body>

</html>

箭頭函式

箭頭函式簡化函式的定義，可以讓我們不用使用function關鍵字

核心程式碼
新建05-箭頭函式.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 箭頭函式 - 重點（在未來的專案開發中：比如小程式，uniapp，一些常見的腳手架大量使用）
        var sum = function sum(a, b) {
            return a + b;
        }

        // 箭頭函式 - 改進1
        var sum = (a, b) => {
            return a + b;
        }

        // 箭頭函式 - 改進2
        var sum = (a, b) => a + b;

        // 通過上面的例子你找到什麼規律
        // 1: 去掉function
        // 2: 在)括號後面加箭頭
        // 3: 如果邏輯程式碼僅有return可以直接省去。（如果有邏輯體，你就不能省略），比如
        // 4: 如果引數只有一個，可以把括號也省去（如果有多個引數就不能省去），比如
        var sum2 = function sum(a, b) {
            var num = a + b;
            return num;
        }

        var arr = [1, 2, 3, 4, 5, 6];
        // var newarr = arr.map(function (obj) {
        //     return obj * 2;
        // })

        //改變
        var newarr = arr.map(obj=>obj * 2)
        console.log(newarr);


    </script>
</body>

</html>

3.5、ES6的語法：物件初始化簡寫

核心程式碼

新建06-物件簡寫.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        let info = {
            title: "廣東學相伴",
            link: "https://www.kuangstudy.com",
            go:function() {
                console.log("我騎著小藍車來公司上班");
            }
        }

        // es6簡寫
        // 因為物件是key:value存在
        // 1: 如果key和變數的名字一致，可以只定義一次即可
        // 2: 如果value是一個函式，可以把 `:function` 去掉，只剩下()即可
        var title = "廣東學相伴";
        var link = "https://www.kuangstudy.com";

        let info2 = {
            title,
            link,
            go() {
                console.log("我騎著小藍車來公司上班");
            }
        }

        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        console.log(info2.go());
    </script>
    
</body>
</html>

新建06-物件簡寫的案例.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="">
        <p>賬號：<input type="text" id="account"></p>
        <p>密碼：<input type="text" id="password"></p>
        <p><input type="button" value="登入" id="loginbtn"></p>
    </form>
    
    <script>
        // document.getElementById("loginbtn").onclick = function(){}

        $("#loginbtn").on("click",function() {
            var account = $("#account").val();
            var password = $("#password").val();
            // 物件簡寫的應用場景
            var params = {account,password}
            // 執行非同步請求
            $.ajax({
                type: "post",
                url: "http://localhost:8080",
                data:params,
                success(){
                    
                }
            })



        })

    </script>
</body>
</html>

3.6、ES6的語法：物件解構

es6物件解構-其實就是快速獲取物件屬性和物件方法的一種方式

核心程式碼

新建07-物件解構.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 物件是key:value存在，獲取物件屬性和方法的方式有兩種
        // 1: 通過.
        // 2: 通過[]
        var title = "廣東學相伴";
        var link = "https://www.kuangstudy.com";

        let info2 = {
            title,
            link,
            go() {
                console.log("我騎著小藍車來公司上班");
            }
        }

        // 通過.的方式
        console.log(info2.title);
        console.log(info2.link);
        console.log(info2.go());

        // 通過[]的方式
        console.log(info2["title"]);
        console.log(info2["link"]);
        console.log(info2["go"]());

        // es6物件解構-其實就是快速獲取物件屬性和物件方法的一種方式
        var { title, link, go } = info2;
        // 還原始碼
        // var title = info2.title;
        // var link = info2.link;
        console.log(title, link);
        go();
    </script>

</body>

</html>

3.7、ES6的語法：傳播操作符【…】

把一個物件的屬性傳播到另外一個物件中

新建08-物件傳播操作符.html如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 物件傳播操作符...
        var person = {
            name: "學相伴",
            address: "廣東",
            link: "https://www.kuangstudy.com",
            phone: 1234567,
            go() {
                console.log("開始上班了");
            }
        };

        // 解構出來
        var { name, address, ...person2 } = person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>
</body>

</html>

案例分析：

新建09-物件操作符的案例分析.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // java ---後臺
        // 資料格式: var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
        // 非同步請求
        // $.post("/user/serach",function(){
            //var res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
            var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
            var {users,...userPage2} = userPage;
            
        //})
    </script>
</body>
</html>

3.8、ES6的語法：陣列map和reduce方法使用(瞭解)

map()

方法可以將原陣列中的所有元素通過一個函式進行處理並放入到一個新陣列中並返回該新陣列。

新建10-陣列map.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 要對arr陣列每個元素*2
        let arr = [1,2,3,4,5,6,7];
        // 傳統的方式
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            newarr.push(arr[i]*2);
        }
        console.log(newarr);

        // map --自帶的迴圈，並且會把處理的值回填對應的位置
        var newarr2 = arr.map(ele=> ele * 2)
        console.log(newarr2);

        // map處理物件的資料
        var users = [{age:10,name:"小學"},{age:12,name:"小相"},{age:15,name:"小伴"}];
        var newusers = users.map(ele=> {
            ele.age =ele.age + 1;
            return ele;
        })
        console.log(newusers);
    </script>
</body>
</html>

reduce()

reduce(function(),初始值（可選）) ：

接收一個函式（必須）和一個初始值（可選），該函式接收兩個引數：

第一個引數是上一次reduce處理的結果
第二個引數是陣列中要處理的下一個元素
reduce() 會從左到右依次把陣列中的元素用reduce處理，並把處理的結果作為下次reduce的第一個引數。如果是第一次，會把前兩個元素作為計算引數，或者把使用者指定的初始值作為起始引數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10];
        // a = 1 , b = 2  3
        // a = 3 , b = 3  6
        // a = 6 , b = 4  10
        // ...
        // a = 45 , b = 10 55          
        var result = arr.reduce(function(a,b) {
            return a+b;
        })
        console.log("result = ",result);
    </script>
    
</body>
</html>

04、NPM包管理器

4.1、簡介

官方網站：https://www.npmjs.com/
NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模組生態系統，裡面所有的模組都是開源免費的；也是Node.js的包管理工具，相當於後端的Maven

#在命令提示符輸入 npm -v 可檢視當前npm版本
npm -v

4.2、使用npm管理專案

1、建立資料夾npm

2、專案初始化

#建立一個空資料夾，在命令提示符進入該資料夾  執行命令初始化
npm init
#按照提示輸入相關資訊，如果是用預設值則直接回車即可。
#name: 專案名稱
#version: 專案版本號
#description: 專案描述
#keywords: {Array}關鍵詞，便於使用者搜尋到我們的專案
#最後會生成package.json檔案，這個是包的配置檔案，相當於maven的pom.xml
#我們之後也可以根據需要進行修改。
#如果想直接生成 package.json 檔案，那麼可以使用命令npm init -y

4.3、修改npm映象

1、修改npm映象

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢。

這裡推薦使用淘寶 NPM 映象 http://npm.taobao.org/

淘寶 NPM 映象是一個完整 npmjs.com 映象，同步頻率目前為 10分鐘一次，以保證儘量與官方服務同步。

2、設定映象地址

#經過下面的配置，以後所有的 npm install 都會經過淘寶的映象地址下載
npm config set registry https://registry.npm.taobao.org 
#檢視npm配置資訊
npm config list

4.4、npm install

#使用 npm install 安裝依賴包的最新版，
#模組安裝的位置：專案目錄\node_modules
#安裝會自動在專案目錄下新增 package-lock.json檔案，這個檔案幫助鎖定安裝包的版本
#同時package.json 檔案中，依賴包會被新增到dependencies節點下，類似maven中的 <dependencies>
npm install jquery
#如果安裝時想指定特定的版本
npm install [email protected]
#devDependencies節點：開發時的依賴包，專案打包到生產環境的時候不包含的依賴
#使用 -D引數將依賴新增到devDependencies節點
npm install --save-dev eslint
#或
npm install -D eslint
#全域性安裝
#Node.js全域性安裝的npm包和工具的位置：使用者目錄\AppData\Roaming\npm\node_modules
#一些命令列工具常使用全域性安裝的方式
npm install -g webpack
#npm管理的專案在備份和傳輸的時候一般不攜帶node_modules資料夾
npm install #根據package.json中的配置下載依賴，初始化專案

4.5、其他命令

#更新包（更新到最新版本）
npm update 包名
#全域性更新
npm update -g 包名
#解除安裝包
npm uninstall 包名
#全域性解除安裝
npm uninstall -g 包名

4.6、小結

1: npm : node package manager ,node包管理器，類似於maven
作用：
    1: 快速構建nodejs工程
    - npm init / npm init -y
        - 得到一個package.json 這個檔案裡的內容如下：
        {
        "name": "npmpro", // 工程名
        "version": "1.0.1", // 版本
        "description": "我是一個node工程", // 描述
        "main": "index.js", // 入口 
        "scripts": { // 執行指令碼
            "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "edgar", // 開發者
        "license": "ISC" // 授權協議
        }
        類似於：pom.xml 檔案作用 管理依賴。

    2: 快速安裝和依賴第三方模組。
        2-1: 快速安裝依賴第三方模組？
             npm install xxxx 或者 npm i xxx模組名
        2-2: 安裝模組放在什麼地方？
             安裝的模組放入到我們專案的node_modules資料夾中
        2-3: 安裝模組如何使用呢？
             -require
             // 匯入模組redis
            const redis = require("redis");
            // 匯入模組mysql
            const mysql = require("mysql");
        2-4: 模組和package.json有何關係？
             "dependencies": {
                 "jquery": "^3.6.0",
                 "mysql": "^2.18.1",
                 "redis": "^3.1.2",
                 "vue": "^2.6.14"
             }
             通過npm install xxx 會記錄在package.json這個檔案中
             就類似於maven中的pom.xml一個含義，記錄作用：複用。

             1: package.json記錄的依賴模組
             2: 通過npm install 可以直接把package.json所依賴的模組全部自動下載下來
             這樣就可以避免重複下載模組。很方便去整合第三方模組。
             3: 為什麼不直接點去拷貝：node_modules呢。當然可以，
             為什麼不拷貝，因為，下載模組的依賴過大檔案過多，混亂檔案很多，一般幾萬到幾十萬的檔案
        2-5: 如果安裝模組很慢怎麼辦？
             npm install -g cnpm --registry=https://registry.npm.taobao.org
             cnpm install xxx
        2-6: 如何執行？
             node xxxx.js 執行過程.js可以省去的 終止的命令列：CTRL+C 多次執行
        2-7: 如何下載多個？
             npm install jquery vue redis mysql
             cnpm install jquery vue redis mysql
        2-8: 下載指定的版本號 
             npm install xxx@版本號
             具體的版本號：檢視官方網址 https://www.npmjs.com/package/redis

     3: 如何解除安裝模組呢？
        npm uninstall vue jquery

05、Babel

5.1、簡介

ES6的某些高階語法在瀏覽器環境甚至是Node.js環境中無法執行。

Babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行執行。

這意味著，你可以現在就用 ES6 編寫程式，而不用擔心現有環境是否支援。

5.2、安裝

安裝命令列轉碼工具

Babel提供babel-cli工具，用於命令列轉碼。它的安裝命令如下：

npm install -g babel-cli
#檢視是否安裝成功
babel --version

5.3、Babel的使用

1、建立babel資料夾

2、初始化專案

npm init -y

3、建立檔案 src/example.js ，下面是一段ES6程式碼：

// 轉碼前
// 定義資料
let input = [1, 2, 3]
// 將陣列的每個元素 +1
input = input.map(item => item + 1)
console.log(input)

4、配置 .babelrc

Babel的配置檔案是.babelrc，存放在專案的根目錄下，該檔案用來設定轉碼規則和外掛，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets欄位設定轉碼規則，將es2015規則加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

5、安裝轉碼器，在專案中安裝

npm install --save-dev babel-preset-es2015

6、轉碼

# npm install --save-dev csv-loader xml-loader
# 轉碼結果寫入一個檔案
mkdir dist1
# --out-file 或 -o 引數指定輸出檔案
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整個目錄轉碼
mkdir dist2
# --out-dir 或 -d 引數指定輸出目錄
babel src --out-dir dist2
# 或者
babel src -d dist2

5.4、自定義指令碼

1、改寫package.json

{
    // ...
    "scripts": {
        // ...
        "build":  "babel src -d dist"
    },
}

2、轉碼的時候，執行下面的命令

npm run build

06、模組化

6.1、簡介

隨著網站逐漸變成”網際網路應用程式”，嵌入網頁的Javascript程式碼越來越龐大，越來越複雜。

Javascript模組化程式設計，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以載入別人已經寫好的模組。但是，Javascript不是一種模組化程式語言，它不支援”類”（class），包（package）等概念，也不支援”模組”（module）。

模組化規範

CommonJS模組化規範
ES6模組化規範

6.2、CommonJS規範

每個檔案就是一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的，對其他檔案不可見。

1、建立“module”資料夾

2、建立 module/commonjs/四則運算.js

// 工具類
const sum = function (a, b) {
    return a + b;
}
const sub = function (a, b) {
    return a - b;
}
const mul = function (a, b) {
    return a * b;
}
const div = function (a, b) {
    return a / b;
}

// 匯出給別人使用就好了
// module.exports = {
//     sum:sum,
//     sub:sub,
//     mul:mul,
//     div:div
// }

// 簡寫
module.exports = {
    sum,
    sub,
    mul,
    div
}

3、建立 module/commonjs/匯入測試.js

// require
const m = require("./四則運算");


// 必須要匯出才能使用
console.log(m.sum(1, 2));
console.log(m.sub(1, 2));
console.log(m.mul(1, 2));
console.log(m.div(1, 2));

//common js 模組化開發！

5、執行程式

node .\匯入測試.js

6、輸出結果

CommonJS使用 exports 和require 來匯出、匯入模組。

6.3、ES6模組化規範

ES6使用 export 和 import 來匯出、匯入模組。

1、建立"es6"資料夾

2、建立 src/userApi.js 檔案，匯出模組

export function getList(){
    // 在真實業務中，非同步獲取資料
    console.log("獲取資料列表");
}

export function save(){
    // 在真實業務中，非同步獲取資料
    console.log("儲存資料");
}

3、建立 src\userTest.js檔案，匯入模組

import { getList,save } from "./userApi";

getList();
save();

// node預設不支援 es6 語法的 import

注意：這時的程式無法執行的，因為ES6的模組化無法在Node.js中執行，需要用Babel編輯成ES5後再執行。

4、初始化專案

npm init -y

5、配置 .babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

6、安裝轉碼器，在專案中安裝

npm install --save-dev babel-preset-es2015

7、定義執行指令碼，package.json中增加”build”

{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

8、執行命令轉碼

npm run build

9、執行程式

node dist/userTest.js

10、輸出結果

獲取資料列表
儲存資料

6.4、ES6模組化寫法2

1、建立 src/userApi2.js ，匯出模組

// 前端開發中，經常看到這樣的程式碼
export default{
    getList(){
        // 在真實業務中，非同步獲取資料
        console.log("獲取資料列表");
    },

    save(){
        // 在真實業務中，非同步獲取資料
        console.log("儲存資料");
    }
}

2、建立 src/userTest2.js，匯入模組

import user from "./userApi2";

user.getList();
user.save();

// node 預設不支援 es6 語法的 import

3、執行命令轉碼

npm run build

4、執行程式

node dist/userTest2.js

5、輸出結果

獲取資料列表
儲存資料

07、Webpack

7.1、什麼是Webpack

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求。

7.2、Webpack安裝

1、全域性安裝

npm install -g webpack webpack-cli

2、安裝後檢視版本號

webpack -v

7.3、初始化專案

1、建立webpack資料夾

npm init -y

2、建立src資料夾

3、src下建立common.js

// 輸出
exports.info = function (str) {
    // 往控制檯輸出
    console.log(str);
    // 往瀏覽器輸出
    document.write(str);
}

4、src下建立util.js

// 相加函式
exports.add = (a, b) => a + b;

5、src下建立main.js

// 匯入util
const util = require("./util");
// 匯入common
const common = require("./common");

common.info("Hello World ,"+util.add(100,100));

7.4、JS打包

1、webpack目錄下建立配置檔案webpack.config.js

// 匯入path模組 nodejs內建模組
const path = require("path");

// 定義JS打包的規則
module.exports = {
    // 1: 入口函式 從哪裡開始編譯打包
    entry: "./src/main.js",
    // 2: 編譯成功以後把內容輸出到哪裡去
    output: {
        // 2.1: 定義輸出的指定的目錄 __dirname當前專案根目錄，產生一個dist資料夾
        path: path.resolve(__dirname, "./dist"),
        // 2.2: 合併的js內容儲存在dist/bundle.js檔案中
        filename: "bundle.js"
    }
}

以上配置的意思是：讀取當前專案目錄下src資料夾中的main.js（入口檔案）內容，分析資源依賴，把相關的js檔案打包，打包後的檔案放入當前目錄的dist資料夾下，打包後的js檔名為bundle.js

2、命令列執行編譯命令

webpack
#執行後檢視bundle.js 裡面包含了上面兩個js檔案的內容並進行了程式碼壓縮

也可以配置專案的npm執行命令，修改package.json檔案

"scripts": {
    //...,
    "dev": "webpack"
 }

執行npm命令執行打包

npm run dev

3、webpack目錄下建立index.html ，引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="../dist/bundle.js"></script>
</body>
</html>

4、瀏覽器中檢視index.html

7.5、Css打包

1、安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。

Loader 可以理解為是模組和資源的轉換器。

首先我們需要安裝相關Loader外掛

css-loader 是將 css 裝載到 javascript

style-loader 是讓 javascript 認識css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

// 匯入path模組 nodejs內建模組
const path = require("path");

// 定義JS打包的規則
module.exports = {
    // 1: 入口函式 從哪裡開始編譯打包
    entry: "./src/main.js",
    // 2: 編譯成功以後把內容輸出到哪裡去
    output: {
        // 2.1: 定義輸出的指定的目錄 __dirname當前專案根目錄，產生一個dist資料夾
        path: path.resolve(__dirname, "./dist"),
        // 2.2: 合併的js內容儲存在dist/bundle.js檔案中
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,// 把專案中所有的.css結尾的檔案進行打包
            use: ["style-loader", "css-loader"]
        }]
    }
}

3、在src資料夾建立style.css

body {
    background-color: yellow;
}

4、修改main.js，在第一行引入style.css

require('./style.css');

5、執行編譯命令

// 一次性打包
webpack 
或
// 實時監聽
webpack -w

6、瀏覽器中檢視index.html ，看看背景是不是變成黃色啦？

把這些知識都學習完畢了，那我們之後學習 Vue 就輕鬆啦！這些都是現在前端工程師的基礎！

7.6 、小結

1: 建立一個nodejs專案 npm init -y

2: 建立一個src目錄

3: 在src存放兩個需要合併的util.js和common.js

4: 準備一個入口檔案 main.js，其實就是模組集中進行引入

//JS打包

5: 在根目錄下定義個webpack.config.js檔案配置打包的規則

6: 執行webpack檢視效果

08、Vue-element-admin

vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內建了 i18 國際化解決方案，動態路由，許可權驗證，提煉了典型的業務模型，提供了豐富的功能元件，它可以幫助你快速搭建企業級中後臺產品原型。相信不管你的需求是什麼，本專案都能幫助到你。

官網地址：https://panjiachen.github.io/vue-element-admin-site/zh/

執行工程和編譯工程

# 克隆專案
git clone https://github.com/PanJiaChen/vue-element-admin.git 
# 進入專案目錄
cd vue-element-admin
# 安裝依賴
npm install
# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 本地開發 啟動專案
npm run dev

啟動完成後會自動開啟瀏覽器訪問 http://localhost:9527

注意如果老是安裝失敗：

# npm install卡在一個地方很久或者報ssl錯誤怎麼辦？
git config --global http.sslVerify false
git config --global url."https://".insteadOf git://

# 請刪除 node-modules 然後執行npm install

小結

nodejs專案幾要素

package.json (npm init \ npmt init -y)
node_modules (npm install -g jquery/npm install jquery)
執行是使用：檢視官網提供幾乎所有的nodejs都啟動和打包都是如下：
- npm run dev （開發執行）
- npm run build (打包)