01_Nodejs_NPM_webpack_ECMAScript6

最新推荐文章于 2024-06-20 13:32:38 发布
最新推荐文章于 2024-06-20 13:32:38 发布
阅读量375 收藏 2
点赞数
分类专栏： 前端 文章标签： node.js npm es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sly_7031/article/details/106417864
版权

1. Nodejs概述

目标：Node.js用途；安装Node.js

小结：

Node.js是一个可以在js中接收和处理web请求的应用平台。

2. Nodejs模块化编程

目标：编写模块文件使用require引入模块后使用node.js执行

小结：

可以使用exports将js方法导出，并使用require引入对应的js模块，然后再引入之后可以使用对应的方法。

3. 创建Nodejs Web服务器

目标：引入http模块监听8888端口实现输出字符

小结：

可以利用node.js创建web服务器：

//引入node.js内置http模块
var http = require("http");

//创建并监听web服务器
http.createServer(function (request, response) {

    //发送http头部
    //参数1：响应状态码，200表示成功
    //参数2：响应头部信息，Content-Type内容类型：纯文本
    response.writeHead(200, {"Content-Type": "text/plain"});

    //发送响应数据
    response.end("Hello World \n");
}).listen(8888);
console.log("服务器运行在 http://127.0.0.1:8888 ");

4. 处理Nodejs Web请求参数

目标：引入http和url模块创建web容器并使用url解析请求路径中参数且输出

分析：

需求：http://127.0.0.1:8888?id=123&name=lisi获取到请求路径中参数及值并输出

实现步骤：

  1. 创建web服务器；
  2. 引入url模块；
  3. 利用url解析请求地址中的参数和值并输出
  4. 启动测试；

小结：

在node.js中可以引入url内置模块对请求地址进行处理：

//引入node.js内置http模块
var http = require("http");
var url = require("url");

//创建并监听web服务器
http.createServer(function (request, response) {

    //发送http头部
    //参数1：响应状态码，200表示成功
    //参数2：响应头部信息，Content-Type内容类型：纯文本
    response.writeHead(200, {"Content-Type": "text/plain"});

    //解析请求地址
    //参数1：请求地址
    //参数2：true的话使用query解析参数到一个对象，默认false
    var params = url.parse(request.url, true).query;
    for(var key in params){
        response.write( key + " = " + params[key]);
        response.write("\n");
    }

    //发送响应数据
    response.end("");
}).listen(8888);
console.log("服务器运行在 http://127.0.0.1:8888 ");

5. 包资源管理器NPM

目标：说出npm的作用；区别本地安装和全局安装

小结：

npm是一个node.js的管理和分发工具，可以根据配置package.json下载js库。

  • 本地安装：将下载的模块安装到当前目录（项目）；
  • 全局安装：将下载的模块安装到全局的目录（ npm root -g ）

6. 切换NPM镜像

目标：安装nrm组件将npm的镜像切换为淘宝镜像

小结：

  • 使用nrm 切换镜像源
npm install nrm -g

nrm use taobao
  • 使用cnpm下载
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install **

7. webpack概述

目标：webpack的作用是什么并安装webpack

小结：

webpack作用：可以将多个静态资源js、css等打包成一个js文件。

安装命令如下：

npm install webpack -g
npm install webpack-cli -g

8. webpack打包js

目标：创建2个js文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。

分析：

实现步骤：

  1. 创建2个js文件；
  2. 创建入口文件main.js；
  3. 创建webpack的配置文件；
  4. 运行webpack命令；
  5. 创建index.html页面进行测试

小结：

webpack打包js的配置文件：

var path = require("path");

module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //路径
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

webpack可以将多个js文件打包成一个js

9. webpack打包css

目标：安装style-loader css-loader组件，创建并使用css文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。

分析：

实现步骤：

  1. 安装转换css的组件；
  2. 修改配置文件；
  3. 创建css文件；
  4. 修改入口文件，加载css文件；
  5. 打包并测试

小结：

webpack打包css文件需要安装转换的组件，并修改配置文件：

var path = require("path");

module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //路径
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

10. ES6概述&创建测试工程

目标：了解es6应用场景；创建测试工程

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。

它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

11. let和const命令及模板字符串

目标：使用let和const定义变量说出区别；模板字符串的好处以及对象初始化简写

小结：

  • let所声明的变量只能在let命令所在的代码块中使用
  • const声明的变量是常量，也就是值不可以改变
  • 模板字符串：可以不用通过反斜杠拼接多行字符，直接使用`
  • 对象初始化简化：可以在返回的对象时，不用指定属性名。

12. 解构表达式

目标：将数组、对象中的值或属性使用解构表达式设置到对应变量

小结：

解构表达式：可以对数组、对象的元素或者属性按顺序、名称的方式进行赋值到对应变量中。

13. 函数优化

目标：箭头函数的好处；对象的函数属性简写，箭头函数与解构表达式的应用

小结：

箭头函数：可以不用编写基础函数的解构（如：function），直接使用 =>

        var print = function (obj) {
            console.log(obj);
        };
        print("print");
        //箭头函数
        var print2 = obj => console.log(obj);
        print2("print2");

        var sum = function (a, b) {
            return a+b;
        };
        console.log(sum(1,2));

        //箭头函数
        var sum2 = (a,b) => a+b;
        console.log(sum2(1,2));

        var sum3 = (a,b) => {
            console.log(a+b);
            return a+b;
        };
        console.log(sum3(1,2));

        let person = {
            "name": "lisi",
            learn1: function (course="java") {
                console.log(this.name + " 在学习 " + course);
            },
            //箭头函数；不能使用this
            learn2: (course) => console.log(person.name + " 在学习 " + course),
            //简写
            learn3(course){
                console.log(this.name + " 在学习 " + course);
            }
        };
        person.learn1("java");
        person.learn2("js");
        person.learn3("css");

        const person = {
            name:"lisi",
            age:13,
            language:["java","js","css"]
        };
         function hello(person) {
             console.log("hello " + person.name);
         }
         hello(person);

         //箭头函数、解构表达式
        var hello2 = ({name}) => console.log("hello2 " + name);
        hello2(person);

14. map方法使用

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

小结：

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

15. reduce方法使用

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

小结：

reduce方法会从左到右依次把数组中的元素用函数处理（reduce方法的第一个参数），会返回一个执行结果。

let arr = [1, 2, 3]

arr.reduce((a,b)=>a+b)

第1次：(1,2) => 1+2

第2次：(3, 3) => 3+3 --------》 6

16. promise应用示例

目标：promise的应用场景及示例

小结：

promise是一个对象，保存着预期事件执行的结果；可以应用在异步操作时候，指定异步操作的成功与失败的结果。

        const promise = new Promise(function (resolve, reject) {
            setTimeout(()=>{
                let num = Math.random();
                if(num < 0.5){
                    resolve("操作成功！num=" + num);
                } else {
                    reject("操作失败！num=" + num);
                }
            },300);
        });

        promise.then(function (msg) {
            console.log(msg);
        }).catch(function (msg) {
            console.log(msg);
        });

17. 对象的扩展方法使用

目标：Object对象中的keys/values/assign的作用

小结：

Object的方法：

  • keys：获取对象的属性名
  • values：获取对象的属性值
  • entries：获取对象的属性和属性值
  • assign：可以将对象进行拷贝

18. 数组的扩展方法使用

目标：数组中的find/findIndex/includes的作用

小结：

数组的扩展方法：

  • find：根据函数条件查找数组中符合条件的元素
  • findIndex：与find类似，返回的不是元素而是元素对应的索引号
  • includes：判断指定的元素是否存在

19. 安装babel

目标：安装babel及了解babel的作用

小结：

babel是一个javaScript语法编译器，可以将es6的语法进行转换并执行。

需要安装babel：

cnpm install babel-preset-es2015 --save-dev 
cnpm install babel-cli -g

编写.babelrc文件，指定es的版本

可以通过命令去执行对应的js文件：babel-node

20. export和import联合应用

目标：export和import的联合应用场景；使用export导出模板文件，import引入模板文件

小结：

可以通过export导出模块，通过import导入模块并使用其内容。

导出有两种方式：命名导出和默认导出。

因为浏览器默认不支持export和import命令，所以需要安装babel对export和import进行解析和执行。

nodejs基础
weixin_42943920的博客
01-22 899
nodejs介绍: 为什么浏览器可以运行js代码,因为浏览器有js解析引擎 ! 将浏览器引擎单独拿出来,做成一个软件,叫node,目的是使用js写后端 什么是node 一款基于chrome v8 解析引擎运行js代码时的环境 node作用 -当js代码引入到html中,在浏览器中运行的时候,叫做前端js,用来操作DOM和BOW,完成网页特效 -当js代码通过node软件运行的时候,没有DOM和BOM的操作,而是读取电脑硬盘 读写文件 操作数据库等; -可以当作电脑系统和数据库的时候,就可以当作服务器来使用
Nodejs基础
qq_40560331的博客
10-29 256
Day06 一、NPM 二、FS模块 1、Stat类 fs.stat(path,[,options],callback) const fs=require("fs"); //异步获取Stats类 fs.stat("./tmp.txt",(err,stats)=>{ console.log(stats.isFile());//判断当前路径是否是文件，是文件则返回true console.log(stats.isDirectory());//判断当前路径是否是文件夹，是文件夹则返回true
node.js和es6
qq_45906102的博客
07-21 286
Node.js安装 1、下载对应你系统的Node.js版本: https://nodejs.org/en/download/ 资料 文件夹中已经提供。 查看node版本信息 node -v 包资源管理器NPM npm是一个node.js的管理和分发工具，可以根据配置package.json下载js库。 本地安装：将下载的模块安装到当前目录（项目）； 全局安装：将下载的模块安装到全局的目录（ npm root -g ） 切换NPM镜像 使用nrm 切换镜像源 npm install nrm -g nrm u
【vue】Nodejs & npm ECMAScript6 路由 webpack打包 vue_cli(脚手架)
snailisBigbull的博客
08-22 613
一.前端技术 1.1 课程安排 1.2 前端技术认识(了解一下下) 1.2.1 前端发展历史 1.2.2 新概念解释 1.2.2.1 Node.js 1.2.2.2 各种前端框架介绍 1.2.2.3 MVVM模式认识 ...
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
淡水瑜的博客
06-20 1606
大前端
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
06-20
ECMAScript 6（简称ES6）是JavaScript语言的第六版标准，也被称为ES2015。它引入了许多新特性，如箭头函数、类、模板字符串、解构赋值、let和const声明、Promise对象、Generator和async/await等。这些特性极大地提升...
大前端进阶技术：掌握NodeJS、Npm、Es6、Babel、Webpack
资源摘要信息:"狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记" 本文档是一份关于大前端技术进阶的学习笔记，涵盖了当前前端开发中非常重要的几项技术：NodeJS、Npm、Es6、Babel、Webpack ...
开发知识点-NodeJs-npm/Pnpm/Yarn包管理器
aming小老弟
11-08 1395
Node.js 是一个基于 Chrome V8 引擎的开源免费跨平台的 JavaScript 运行环境。由于 Node.js 进程尝试加载 providers.dll 时没有指定 DLL 的绝对路径。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。攻击者可以在当前工作目录写入恶意 DLL 文件进行 DLL劫持攻击。Windows 会按照特定策略进行搜索以找到所需的 DLL 文件。Node.js 组件存在 DLL 劫持漏洞。快速的，节省磁盘空间的包管理工具。
Node.js基础
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-20 868
Node.js基础
——nodeJS基础
weixin_43596601的博客
04-26 297
NodeJs—基础知识 参考文献 一、NodeJs概述 ​ 基于谷歌的v8引擎（js解释器），运行在服务器端的语言，基于js的 对比js和nodejs （1）js运行在浏览器端，存在多个浏览器，容易产生兼容性的问题；而nodejs在服务器端只有一个运营环境，不 存在兼容性。 （2）两者都有内置（es）对象，自定义对象，宿主对象（根据执行环境的不同来区分） （3）JS用于网页中的交互效果，而nod...
Node.js 基础
xiaohuichonga的博客
03-21 1227
1、fs 文件系统模块 1.1、什么是 fs 文件系统模块 fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。 1.1.2 fs.readFile()方法，用来读取指定文件中的内容。语法格式： fs.readFile(path[,options],callback) 参数： ⚫参数1：必选参数，字符串，表示文件的路径。 ⚫ 参数2：可选参数，表示以什么编码格式来读取文件。（utf8） ⚫ 参数3：必选参数，文件读取完成后
NodeJs基础
进击的程序猿
06-10 1894
NodeJs基础 nodejs的本质：不是一门新的编程语言，nodejs是javascript运行在服务端的运行环境，编程语言还是javascript global模块-全局变量 Node.js 中的全局对象是 global, 类似于浏览器中的window 常用的global属性 console: 用于打印日志 setTimeout/clearTimeout: 设置清除延时器 setInt...
node.js基础
courageFei的博客
12-02 399
浏览器的工作原理 浏览器的组成 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分 浏览器引擎－ 用来查询及操作渲染引擎的接口 渲染引擎（浏览器内核）－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同...
nodejs npm版本降级_nodejs安装后查看npm版本，报错
05-14
如果在安装 Node.js 后查看 npm 的版本时出现错误，可能是因为 ...npm install -g npm@6 ``` 3. 确认 npm 版本是否正确安装。运行以下命令查看 npm 版本： ``` npm -v ``` 如果输出的版本号为 6.x，说明降级成功。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值