大前端进阶

最新推荐文章于 2024-04-17 22:43:32 发布

牛魔瘦了

最新推荐文章于 2024-04-17 22:43:32 发布

阅读量860

点赞数 1

文章标签：前端 javascript webpack

本文链接：https://blog.csdn.net/yinuo_chao/article/details/124497089

版权

大前端进阶

NodeJs、ES6详解、NPM详解、Babel详解、前端模块化开发、WebPack详解。

点击跳转大前端进阶视频

在这里插入图片描述

别人拥有的，不必羡慕；只要努力，时间都会给你！

NodeJs 运行在服务端的JavaScript

ES6详解 JavaScript新特性

NPM详解前端的包管理工具

Babel详解 JavaScript编译器

前端模块化开发前端也有模块化

WebPack详解 Webpack是一个模块打包器

P00 序言

大家在前端学习过程中一定遇到过一下的问题：

比如说自己学了html、css、js以及jQuery之后就去写前端代码了。

写的兴高采烈的，然后一进公司，然后一看咱们的开源项目就开始懵逼了。

像什么Vue、React还有uniapp等这样一系列的前端框架，

用纯前端就可以独立的去完成一些前端项目的开发，可以脱离于后端运行。

然后后端甚至还用NodelJS去当咱们的一个服务器端来处理咱们的一个请求，

哎这下就把自己给慌了，自己是不是学了个假前端，自己是不是不适合学前端。

在前端基础到高级之间，肯定是有一个循序渐进的这样一套课程，来给大家从基础到拔高。

那在这里的话大家缺少什么知识呢？

比如说nodeJS、比如说npm、比如说es的一些新语法、比如说Babel、比如说webpack的等等

像这样一系列的前端知识应该干嘛？单独形成一个小的系列课，让大家在这个地方去巩固。

学完咱们这个系列的课之后，你再去学咱们的Vue、React、Uniapp，这样的框架你会干嘛，

十分简单了，就不会因为代码看不懂。比如说模块化管理 import、比如说以前的话JS里面是没有这些的。

在es6里面就有这些模块化开发了。所以大家非常有必要去学习这些内容。

P01 大前端基础知识概述

1.1、课程目标

前端开发和前端开发工具
Nodejs安装及快速入门
Es6的新语法糖
Npm包管理器
Babel的安装作用
模块化管理
Webpack打包和编译
如何快速构建一个nodejs项目vue-admin-element
如何快速构建一个nodejs项目antd

P02 概述和前端工具VsCode安装

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览器为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

移动互联网带来了大量高性能的移动终端设备以及快速的无限网络，HTML5，node.js的广泛应用，各类框架类库层出不穷。

当下国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。

2.1、下载安装VScode

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

在这里插入图片描述

1：双击打开vscode安装包

在这里插入图片描述

2：选择安装目录

在这里插入图片描述

不创建桌面图标（个人喜好）

在这里插入图片描述

直接点击【下一步】
在这里插入图片描述

点击【安装】
在这里插入图片描述

安装完毕
在这里插入图片描述

点击完成
在这里插入图片描述

2.2、中文界面配置
在这里插入图片描述

2.3、插件安装

为方便后续开发，建议安装如下插件

ESLint

Live Server

Node.js

Vetur

VueHelper

在这里插入图片描述

2.4、设置字体大小

文件 --> 首选项 --> 设置（ctrl+,）–> 搜索"font"–> FontSize

在这里插入图片描述

2.5 、开启完整的Emmet语法支持

设置中搜索Emmet：启用如下选项，必要时重启vs

在这里插入图片描述

2.6、视图

查看 --> 外观 --> 向左移动侧边栏

P03 Nodejs 的安装

了解&安装

目标：了解node.js、并且在本地安装好这个软件

官网：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-v16.14.2-x64.msi

查看是否安装成功

node -v

npm -v

查看node.js是否安装成功

在这里插入图片描述

下载对应你系统的Node.js版本：

下载地址：http://nodejs.cn/download/

帮助文档：http://nodejs.cn/api/

关于Node.js：http://nodejs.cn/api/documentation.html

小结

Nodejs是一门计算机语言，运行在系统中的v8（jvm）引擎中。文件后缀是js运行的命令：node

在这里插入图片描述

P04 Nodejs 了解和快速入门

快速入门

快速入门-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 引擎。

P05 Nodejs 实现Httpserver服务

Node - 实现请求响应

1、创建 httpserver.js ;

// 导入模块是require 就类似于import java.io
const http = require('http');

// 1: 创建一个httpserver服务
http.createServer((req, res) => {
    // 浏览器怎么认识hello server!!!
    res.writeHead(200,{'Content-type':'text/html'}); //这句话的含义是：告诉浏览器将
    // 以text/html去解析hello server这段数据。
    // 给浏览器输出内容
    res.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/ 查看httpserver成功运行，并输出html页面

4、停止服务：ctrl + c

P06 Nodejs 操作MySQL数据库

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

1: 安装mysql依赖

npm install mysql

2: 定义db.js运行操作

// 导入mysql依赖包，mysql属于第三方的模块就类似于 java.sql 一样的道理
const { connect } = require("http2");
var mysql = require("mysql");
// 1: 创建一个mysql的Connection对象
// 2: 配置数据连接的信息
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"nm123456",
    database:"testdb"
});
// 3: 开辟连接
connection.connect();
// 4: 执行curd
connection.query("select * from kss_user",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results = ",results);
});
// 5：关闭连接
connection.end();
// 最后一步：运行node db.js 查看效果

3: 新建数据库

testdb和表 kss_user 表

在这里插入图片描述

4: 运行db.js

node db.js

在这里插入图片描述

P07 Es6 概述

ECMAScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

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环境中使用这些新特性。

P08 Es6 let和const的认识

变量和常量的严格区分。

01-let和const的定义.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 传统定义变量和常量的方式 统一使用var
        var name = "牛魔瘦了";
        var link = "https://www.baidu.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        // ES6定义的方式
        let name2 = "再见悟空";
        let link2 = "https://www.baidu.com";

        // 定义常量
        const PI2 = Math.PI;

        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>
</body>
</html>

运行结果

在这里插入图片描述

P09 Es6 let和const和var的区别

var定义

02-let-const和var的区别.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //let 和const解决
        // 1: var的变量穿透的问题
        // 2: 常量修改的问题
        for(var i=0;i<5;i++){
            console.log(i);
        }

        // 这里就造成变量穿透
        console.log(i);

        var PI = Math.PI;
        PI = 100;
        console.log(PI);

        // 在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中的，可以大胆的去使用let和const
        // 但是如果你是web开发。建议大家还是使用var。因为在一些低版本的浏览器还是不支持let和const
    </script>
</body>
</html>

运行结果

在这里插入图片描述

let和const定义

02-let-const和var的区别.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

运行结果

在这里插入图片描述

P10 Es6 模板字符串

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在：``【反引号】

在这里插入图片描述

03-模板字符串.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 字符串会牵涉到动态部分
        var person = {
            name : "牛魔瘦了",
            address : "成都",
            link : "https://www.niumo.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>

运行结果

在这里插入图片描述

P11 Es6 默认参数

函数默认参数

在方法的参数后面加上一个默认值即可

04-函数默认参数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
        }

        var result = sum(100);
        console.log("result = "+result);

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

P12 Es6 箭头函数

05-箭头函数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 箭头函数 - 重点(在未来的项目开发中：比如小程序，uniapp，一些常见的脚手架大量使用)
        var sum = function(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 minu = (a,b,c)=>a-b-c;
        var minus = function(a,b,c){
            return a-b-c;
        };

        var sum2 = (a,b)=>{
            var num = a+b;
            return num;
        }
        
        //var sum = (a,b)=>a + b;
        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>

P13 Es6 对象初始化简写及案例分析

核心代码

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

06-对象简写.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let info = {
            title:"牛魔瘦了",
            link:"https://www.niumo.com",
            go:function(){
                console.log("我开着奥迪Q5L来公司上班");
            }
        };

        //es6简写
        // 因为对象是key:value存在
        // 1: 如果key和变量的名字一致，可以只定义一次即可
        // 2: 如果value是一个函数，可以把`:function`去掉，只剩下()即可
        var title = "牛魔瘦了";
        var link = "https://www.niumo.com";
        let info2 = {
            title,
            link,
            go(){
                console.log("我开着奥迪Q5L来公司上班");
            }
        };

        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();

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

06-对象简写的案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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:"xxx",
                data:params,
                success(){

                }
            })
        });

        var vue = new Vue({
            created(){
                
            }
        })

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

P14 Es6 对象解构

核心代码

对象解构 – es6提供一些快捷获取对象属性的行为方式

07-对象结构.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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.niumo.com";
        let info2 = {
            title,
            link,
            go(){
                console.log("我开着奥迪Q5L来公司上班");
            }
        };

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

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

        // es6对象结构 - 其实就快速获取属性和方法的方式一种形式
        var {title,link,go} = info2;
        // 还原代码
        //var title = info2.title;
        //var link = info2.link;

        console.log(title,link);
        go();

        // 为什么对象取值要提供两种方式. 一个是 [] 括号。

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

P15 Es6 对象传播操作符

把一个对象的属性传播到另外一个对象中

Spread Operator

08-对象传播操作符.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 对象传播操作符
        var person = {
            name:"牛魔瘦了",
            address:"成都",
            link:"https://www.niumo.com/",
            phone:1234567,
            go(){
                console.log("开始上班了");
            }
        };

        // 解构出来
        var {name,address,...person2} = person;
        console.log(name);
        console.log(address);
        console.log(person2);
        person2.go();

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

P16 Es6 对象传播操作符案例分析

09-对象操作符的案例分析.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/search",function(res){
            // res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
            var userPage = {pages:10,users:[{name:"牛魔瘦了",age:5},{name:"诸葛亮",age:3}],pageNo:1,pageSize:100,total:100};
            var {users,...userPage2} = userPage;

            console.log(users);
            console.log(userPage2);
        
        //})
    </script>
</body>
</html>

P17 Es6 数组Map

目标：数组中map方法的应用场景

map()

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个数组中返回新数组。

举例：有一个字符串数组，希望转为int数组

10-数组map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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:"小瘦"},{age:20,name:"小了"}];
        var newusers = users.map(ele=>{
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        });
        console.log(newusers);

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

P18 Es6 数组Reduce

reduce(function(),初始值（可选）) :

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素勇reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。

11-数组reduce.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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
        var result = arr.reduce(function(a,b){
            return a + b;
        });
        console.log("result = ",result);
    </script>
</body>
</html>

P19 Es6 Nodejs的小结

es6 可以在nodejs，uniapp 微信小程序中得到广泛支持，你可以大胆去使用这些新的语法。

P20 Npm 包管理器快速构建node工程

简介

官方网站：https://www.npmjs.com/

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块是开源免费的；也是Node.js的包管理工具，相当于前端的Maven。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

P21 Npm 包管理器安装模块

P22 Npm 包管理器的卸载和小结

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",// 入口js
           "scripts": {// 运行脚本
               "test": "echo \"Error: no test specified\" && exit 1"
           },
           "author": "牛魔瘦了",// 开发者
           "license": "ISC"// 授权协议
         }
         类似于：pom.xml 文件作用管理依赖。


     2: 快速安装和依赖第三个模块。比如npm install mysql redis等等。
        2-1: 快速安装依赖第三方模块？
             npm install xxxx 或者 npm i xxx模块名

             npm install mysql
             npm i redis

        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": "^4.0.6",
                 "vue": "^3.2.33"
             }
             通过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

        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?activeTab=versions

     3: 如何卸载模块呢
             npm uninstall vue jquery

// 导入模块redis
const redis = require("redis");
// 导入模块mysql
const mysql = require("mysql");

const client = redis.createClient();
client.on("error", function(err){
    console.error(err);
});

client.set("key","value",redis.print);
client.get("key",redis.print);

P23 Babel 的安装

简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。

安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli

#查看是否安装成功
babel --version

P24 Babel 的使用

1、创建babel文件夹

2、初始化项目

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

P25 Babel 自定义脚本

1、改写package.json

{
	// ...
	"scripts":{
		// ...
		"build":"babel src\\example.js -o dist\\compiled.js"
		"dev":"babel src -d dist"
	},
}

2、转码的时候，执行下面的命令

mkdir dist
npm run build

P26 模块化 CommonJS规范

简介

模块化产生的背景

随着网站逐渐变成”互联网应用程序“，嵌入页面的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类“（class）,包（package）等概念，也不支持”模块“（module）。

模块化规范

CommonJS模块化规范
ES6模块化规范

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 di = function(a,b){
    return a/b;
}

// 导出给别人使用
// module.exports = {
//     sum: sum,
//     sub: sub,
//     mul: mul,
//     di: di
// }

module.exports = {
    sum,
    sub,
    mul,
    di
}

导入测试.js

// require
const m = require('./四则运算.js')

console.log(m.sum(2,5));
console.log(m.sub(8,5));
console.log(m.mul(2,5));
console.log(m.di(2,5));

// commons js 模块化开发！exports  require  必需要导出了才能使用！
// es6 模块化开发！

P27 模块化 Es6规范

ES6 使用 export 和 import 来导出、导入模块。

各个方法分开导入、导出

userApi.js

export function getList(){
    // 在真实业务中，异步获取数据
    console.log("获取数据列表");
}

export function save(){
    // 在真实业务中，异步保存数据
    console.log("保存数据");
}

userTest.js

import {getList,save} from './userApi.js'

getList()
save()

// 默认不支持 es6 语法的 import

各个方法一起导入、导出

userApi.js

// 前端开发中，经常看到这样的代码
export default{
    getList(){
        // 在真实业务中，异步获取数据
        console.log("获取数据列表");
    },

    save(){
        // 在真实业务中，异步保存数据
        console.log("保存数据");
    }
}

userTest.js

import user from './userApi.js'

user.getList()
user.save()

P28 WebPack 概述和安装

1、什么是Webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。

在这里插入图片描述

2、Webpack安装

全局安装

npm install -g webpack webpack-cli

安装后查看版本号

webpack -v

P29 WebPack 合并JS

readme.md

1: 创建一个node.js项目  npm init -y
2: 创建一个src目录
3: 在src存放两个需要合并的util.js和common.js
4: 准备一个入口文件 main.js,其实就是模块集中进行引入

// JS 打包
5: 在根目录下定义个webpack.config.js文件配置打包的规则
6: 执行webpack查看效果

common.js

// 输出
exports.info = function(str){
    // 往控制台输出
    console.log(str);
    // 往浏览器输出
    document.write(str);
}

util.js

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

main.js

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

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

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/bundule.js文件中
        filename:"bundle.js"
    }
}

webpack

在这里插入图片描述

bundle.js

(()=>{var o={648:(o,r)=>{r.info=function(o){console.log(o),document.write(o)}},891:(o,r)=>{r.add=(o,r)=>o+r}},r={};function n(t){var e=r[t];if(void 0!==e)return e.exports;var d=r[t]={exports:{}};return o[t](d,d.exports,n),d.exports}(()=>{const o=n(891);n(648).info("Hello world ,"+o.add(100,100))})()})();

index.html

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

P30 WebPack 合并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

修改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/bundule.js文件中
        filename:"bundle.js"
    },
    module:{
        rules:[{
            test:/\.css$/,//把项目中所有的.css结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }
}

style.css

body{
    background: yellow;
    font-size: 64px;
    color: red;
}

修改main.js

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

// 导入css
require("./style.css");

common.info("Hello world ,"+ util.add(100,100));
common.info("Hello world ,"+ util.minus(1000,100));

webpack -w #监听

P31 WebPack 小结

webpack官网：https://webpack.docschina.org/

webpack中文文档：https://webpack.docschina.org/concepts/

P32 VueElementAdmin初体验

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

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

国内用户在线预览地址：https://panjiachen.gitee.io/vue-element-admin

# 克隆项目
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

- Preview

- Documentation

- Gitee 国内用户可访问该地址在线预览

npm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git

解决方法：https://blog.csdn.net/weixin_44405693/article/details/122175273

参考地址：https://blog.csdn.net/qq_38230265/article/details/79108862?utm_source=app&app_version=4.5.8

在这里插入图片描述

问题解决后：

在这里插入图片描述

P33 总结及展望

牛魔瘦了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
大前端进阶

大前端进阶NodeJs、ES6详解、NPM详解、Babel详解、前端模块化开发、WebPack详解。点击跳转大前端进阶视频别人拥有的，不必羡慕；只要努力，时间都会给你！NodeJs 运行在服务端的JavaScriptES6详解 JavaScript新特性NPM详解前端的包管理工具Babel详解 JavaScript编译器前端模块化开发前端也有模块化WebPack详解 Webpack是一个模块打包器P00 序言大家在前端学习过程中一定遇到过一下的问题：比
复制链接

扫一扫