ES6模块化、Promise解决回调地狱、EventLoop、webpack打包工具

最新推荐文章于 2022-11-20 16:52:12 发布

CookChopper

最新推荐文章于 2022-11-20 16:52:12 发布

阅读量246

点赞数

分类专栏：努力学前端文章标签： webpack es6

本文链接：https://blog.csdn.net/hjc13348/article/details/117399783

版权

本文介绍了ES6的模块化，包括默认导入与导出、按需导入等；深入探讨了Promise如何解决回调地狱，详细阐述了Promise.all()和Promise.race()方法；讲解了EventLoop的执行过程和宏任务、微任务的概念；最后讨论了webpack的基本使用、配置打包发布及其插件功能。

摘要由CSDN通过智能技术生成

ES6模块化

//Node.js 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。Node.js 遇到.mjs文件，就认为它是 ES6 模块，默认启用严格模式，不必在每个模块文件顶部指定"use strict"。

//如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为module。

// package.json文件
{
   
   "type": "module"
}

默认导入与默认导出

// 01.默认导出.js
const m1 = 'm1';
const m2 = 'm2';
function sayHi(){
   
    console.log('Hi!');
}
// 默认导出只能执行唯一一次
export default {
   
    m1,m2,sayHi
}

// 02.默认导入.js
import mmm from './01.默认导出.js';
console.log(mmm.m1);
console.log(mmm.m2);
mmm.sayHi();
// 执行结果
// m1
// m2
// Hi!

按需导入与按需导出

// 03.按需导出.js

// 按需导出
export const m1 = 'aaa';
export const m2 = 'bbb';
export function sayHi(){
   
    console.log('这是第二个Hi');
}

// 定义
const a1 = 'a1';
function a2(){
   
    console.log('a2');
}
// 默认导出
export default {
   
    a1,a2
}

// 按需导出与默认导出可以同时进行，按需导出可以多次，默认导出谨此一次

// 04.按需导出.js
// 按需导入可以与默认导入一起
import a,{
   m1,m2,sayHi} from './03.按需导出.js';
// 按需导入
console.log(m1);
console.log(m2);
sayHi();
// 默认导入
console.log(a.a1);
a.a2();

直接导入并执行模块

import '模块路径.js'

Promise

解决多层回调函数的相互嵌套(回调地狱)
基本概念：
Promise是一个构造函数
Promise.prototype中包含一个.then()方法
.then()方法用来预先指定成功和失败的回调函数

Promiset.then使用

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容


import thenFs from 'then-fs';

thenFs.readFile('./files/1.text','utf8').then((r1)=>{
   
    console.log(r1);
})

thenFs.readFile('./files/2.text','utf8').then((r2)=>{
   
    console.log(r2);
})

thenFs.readFile('./files/3.text','utf8').then((r3)=>{
   
    console.log(r3);
})

// 此方法为异步操作，上述代码无法保证文件读取顺序，为了保证读取顺序，请使用下列描述的链式调用

Promise.then 和 Promise.catch链式调用


import thenFs from 'then-fs';

thenFs.readFile('./files/1.text','utf8').then(r1=>{
   
    console.log(r1);
    return thenFs.readFile('./files/2.text','utf8');
}).then(r2=>{
   
    console.log(r2);
    return thenFs.readFile('./files/3.text','utf8')
}).then(r3=>{
   
    console.log(r3);
})

// .catch是用来捕获错误的  不用catch 出错没有任何提示
thenFs.readFile('./files/11.text','utf8').then(r1=>{
   
    console.log(r1);
    return thenFs.readFile('./files/2.text','utf8');
}).then(r2=>{
   
    console.log(r2);
    retur