前端相关知识学习笔记Node,NPM,ES6,Webpack

前言:
学习B站UP学相伴飞哥大前端视频笔记整理
视频链接
视频笔记

Node

简介

Node是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。发布于2o9年5月,由Ryan Dahl开发,实质是对Chrome v8引擎进行了封装。

简单的说 Node.js就是运行在服务端的JavaScript

Node.js是一个基于chrome Javascript运行时建立的一个平台。底层架构是:JavaScript.文件后缀:.js

Node.js是一个事件驱动I/o服务端JavaScript环境,基于Google的vs引擎,v8引擎 执行Javascript的速度非常快,性能非常好。
前端相关知识学习笔记Node,NPM,ES6,Webpack_第1张图片

Node实现Http服务

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

//创建一个httpserver服务
http.createServer(function (request,response) {
     

    //让浏览器认识hello server!!!
    response.writeHead(200,{
     'Content-type':'text/html'});
    //输出内容
    response.end("

hello server!!

"
); }).listen(8888);//监听一个端口8888 //启动运行服务 node HttpServer.js //在浏览器访问http://localhost:8888

Node实现访问Mysql

由于Node.js没有mysql模块 需要先使用npm 导入mysql依赖

npm install mysql

前端相关知识学习笔记Node,NPM,ES6,Webpack_第2张图片

//由于Node.js没有mysql模块 需要先使用npm
//npm install mysql

//导入MySQL依赖
var mysql = require('mysql');
//创建一个mysql的Connection对象
var connection=mysql.createConnection({
      //配置数据库链接的信息
    host: '127.0.0.1',
    port: 3306,
    user: 'root',
    password: '123456',
    database: 'mybatis'
});
//开辟链接
connection.connect();
//执行CURD
connection.query('select * from user',function (error,results,fields) {
     
    //如果查询出错 直接抛出
    if(error)throw error;
    //如果查询成功
    console.log('results=',results);
});
//关闭链接
connection.end();

ES6

ES6概述

前端相关知识学习笔记Node,NPM,ES6,Webpack_第3张图片
ECMAScript是前端js的语法规范;可以应用在各种js环境中。如:浏览器或者node.,js环境。它有很多版本:es1/2/3/5/6,很多新特性,可以在js环境中使用这些新特性。

ES6语法糖

Let和const

//传统定义遍历和常量的方式 统一使用var
    var name='学相伴';
    var link='kuangStudy.com';
    var PI=Math.PI;
    
    //ES6定义的方式
    let username="秦疆";
    let linkstudy ='KuangStudy.com';
    
    //定义常量
    const PIN='www.baidu.com';

let 和const解决哪些问题?

let局部变量解决了变量穿透的问题

 for(var i=0;i<5;i++){
     
        console.log(i);
    }
    console.log(i);//这里也能取到值 变量穿透

const解决了常量改变的问题

    var PI=Math.PI;
    PI=100;//常量被改变
    console.log(PI);

在实际开发和生产中 如果是小程序 uniapp或者一些脚手架中 可以大胆的使用let 和const

但是如果是web开发 建议使用var 因为低版本的浏览器只支持ES5规范

模板字符串

   // 字符串会牵涉到动态部分
    var person={
     
        name: '王根基',
        age: 13,
        sex: '男'
    }
    //以前的字符串拼接
    let address = '我是'+person.name+",年龄是"+person.age+",性别是"+person.sex;

    //模板字符串拼接
    let address1=`我是${
       person.name},年龄是${
       person.age},性别是${
       person.sex}`;

箭头函数

   // 箭头函数
    var sum=function (a,b) {
     
        return a+b;
    }
    //箭头函数-改进1
    var sum1 =(a,b)=>{
     
        return a+b;
    }
    //如果逻辑体仅有一个return 
    var sum2=(a,b)=> a+b;
    //如果参数只有一个
    var sum3=a=>{
     
        return a+b;
    }

对象简写

   var info={
     
        name: '王根基',
        age: 13,
        sex: '男',
        go: function () {
     
            console.log(this.name);
        }
    };
    //Es6简写 对象是key:value存在
    //如果key与变量的名字一直 只需只定一次
    //如果value是一个函数 可以把:function全部去除
    var name='王根基';
    var age=13;
    var info={
     
        name: name,
        age: age,
        go(){
     
            console.log(this.name);
        }
    }

对象简写在实际中的应用

<body>
<h3>用户登录h3>
<p>账号:<input type="text" id="username" title="账号">p>
<p>密码:<input type="password" id="password" title="密码">p>
<p><input type="button" id="but" value="提交">p>

<script>
    let username = $('#username').val();
    let username = $('#password').val();
    let params={
      username,username};
    $.ajax({
      
        type: 'POST',
        url: 'www.baidu.com',
        data: params,
        success(msg) {
      

        }
    });
script>
body>

对象解构

//对象是key:value存在 获取对象属性和方法的方式有两种
    // 1 通过.
    // 2 通过[]
    var info={
     
        name: '王根基',
        age: 13,
        sex: '男',
        go: function () {
     
            console.log(this.name);
        }
    };
    // 通过 .
    var name = info.name;
    // 通过 []
    var age= info['age'];
    //Es6对象结构
    var {
     sex,go}=info;
    console.log(sex);

对象传播操作符

var info={
     
        name: '王根基',
        age: 13,
        sex: '男',
        go: function () {
     
            console.log(this.name);
        }
    };
    // 对象传播操作符 ...info2 会把剩下没有取走的值 赋值给新对象
    var {
     name,age,...info2}=info;
    console.log(name,age,info2);

前端相关知识学习笔记Node,NPM,ES6,Webpack_第4张图片

数组map

   //数组每个元素*2
    let arr=[1,2,3,4,5,6];
    //传统方式
    for(let i=0;i<arr.length;i++){
     
        arr[i]=arr[i]*2;
    }
    console.log(arr);
    //Es6 map 自带的循环,并且会把处理的值回填对应的位置
    var arr2=arr.map(function (ele) {
     
         return ele*2;
    });

数组reduce

reduce(function),初始值(可选))
接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:

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

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

 let arr=[1,2,3,4,5,6];
    //快速计算数值和  
    var result=arr.reduce(function (a,b) {
     
        return a+b;
    })

NPM

简介

官方网站:https://www.npmjs.com/
NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于前端的Maven 。

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

使用npm管理项目

1.创建文件夹npm
2、项目初始化

#建立一个空文件夹,在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息,如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词,便于用户搜索到我们的项目
#最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

执行完毕以后会得到一个package.json,内容如下:

{
     
  "name": "npminit",//工程名
  "version": "1.0.0",//版本
  "description": "我是一个node工程",//描述
  "main": "index.js",//入口
  "scripts": {
     //运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "totony",//作者
  "license": "ISC"//授权协议
}
//这个文件类似与maven的pom.xml
#如果想直接生成 package.json 文件,那么可以使用命令
npm init -y

安装模块

#使用 npm install 安装依赖包的最新版,
#模块安装的位置:项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
#同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的 
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中的配置下载依赖,初始化项目

导入模块

# 导入mysql模块
var mysql = require('mysql');

如何运行?

#命令行输入
node xxx.js

其他命令

#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

探究:package.json

1:在发布项目或者拷贝项目的时候,node_moudles其实是没意义的。因为它仅仅在开发和打包的时候使用

2:如果托管代码其实没必要,为什么。因为你package.json文件中已经记录了这些模块坐标。我们可以直接使用npm install 去重新安装和生成node-modules 。所以的nodejs项目下载以后第一个要执行的命令都是npm install的原因也就是如此。

3:这也就是为什么官方不提供node-modules的原因。因为你可以直接用npm install 去下载

Babel

简介

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

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

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

安装

安装命令行转码工具

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

npm install -g babel-cli
#查看是否安装成功
babel --version

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

自定义脚本

1、改写package.json

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

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

mkdir dist
npm run dev

模块化

简介

模块化产生的背景

随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。
Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascipt不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(module)。

模块化规范

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

CommonJS模块化

CommonJS使用 exportsrequire 来导出、导入模块。

导出模块

 // 导出成员:
    module.exports = {
     
        sum: function sum(a,b){
     
            return a+b;
        },
        subtract: subtract,
        multiply: multiply,
        divide: divide
    }

导入模块

//引入模块,注意:当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)

ES6模块化规范

ES6使用 exportimport 来导出、导入模块。

导出模块

export function getList() {
     
    console.log('获取数据列表')
}
export function save() {
     
    console.log('保存数据')
}

导入模块

//只取需要的方法即可,多个方法用逗号分隔
import {
      getList, save } from './userApi.js'
getList()
save()

注意:这时的程序无法运行的,因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5后再执行。

导入导出写法二

导出

export default {
     
    getList() {
     
        console.log('获取数据列表2')
    },
    save() {
     
        console.log('保存数据2')
    }
}

导入

import user from "./userApi2.js"
user.getList()
user.save()

Webpack

什么是Webpack

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

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

安装Webpack

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

JS打包

webpack目录下创建配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
     
    entry: './src/main.js', //配置入口文件
    output: {
     
        path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

以上配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js

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

const path = require("path"); //Node.js内置模块
module.exports = {
     
    //...,
    output:{
     
        //其他配置
    },
    module: {
     
        rules: [  
            {
       
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

你可能感兴趣的:(狂神说学习笔记,javascript,nodejs)