关于前端:vue-ES6模块化promisewebpack打包所在在学的朋友们先看这篇看了不吃亏

首先我要阐明一下，没错，还是没有进入 vue，刘备请诸葛亮三次都能够了吧，我这也是第三次了，也相对是最初一次了，我应经摸透了因为，最初的 webpack 打包加上一个 git 学了过后我就去 vue 了。

为什么要说先看这篇，其实跟咱们明天的主题 webpack 没有太大关系，昨天学了一下 webpack，其实内容没多少，webpack 的内容无非就是参考文档去怎么做，而后最次要的 js、html 生成、css、字体图标、图片来打包包含开启一个 webpack 服务器。然而咱们明天的次要内容，然而我要说的是比拟重要的是，在学的敌人们，正在学包含前面在学的敌人们，作为一个程序员还在手写笔记吗？我也是昨天才晓得手写笔记的就我一个，我都惊了，我那么大一本笔记本，又长又厚的，我都做了那么多了，竟然当初才晓得，属实太亏了，毕竟也是那个情理，如果前面工作不可能去翻书吧，优不优雅暂且不说，这消耗的工夫就离谱尽管我本人做的笔记，我大略晓得哪个知识点在哪一页。

那么既然不太举荐手写笔记了，那要用什么来做呢，程序员必备——Markdown！而他比拟好的一款编辑器——Typora，昨天也花了一点工夫理解了一下它有哪些性能哪些快捷键，的确这样做笔记不便查找，而且省时最次要的，我原来学内容可能内容没多少，然而也挺多的，满打满算都是一天的工夫，反正当初有了这个，特地是代码局部，有时候我还要手写代码，这个间接一个截图的事件，你能够本人想想节俭了多少工夫。

至于我以前在笔记本上的，我的打算是，暴力一点，间接全 背 下 来。

1.

回到咱们明天的主题上来，首先第一个内容说一下 vue 的前提根底，首先 es6 的模块化，首先晓得 commanjs 吧，是咱们 node 的规定，require、exports 都是他的语法，但他不是规范举荐的，真正的正统规范是 ES6 模块化，而且 commanjs 只反对后端，而 es6 反对前后端。

他的一个语法规定：

1.1

导入为 import 裸露共享成员 export 没有了 s

如果咱们 node.js 要应用 es6 模块化的话首先版本号是要大于 14.15.1 的，其次须要在 package.json 增加“type”：“module”

对于他的导入导出一共有两大类，第一类是默认导入导出。

export default 和 import 自定义 from‘门路’留神门路必须增加后缀 js 跟咱们的 commanjs 不一样

let x = 19
let y = 29
function show() {}

export default  {
    x,
    show
}

import m1 from './ 默认导出.js'

console.log(m1);

而后按需导出 export const a = 1 就是谁要导出就在定义它的后面加一个 export

按需导入 import {a} from‘’这个要留神的是花括号外面的名字不再自定义必须和咱们导出的统一，然而咱们能够用 as 重命名

export let x = 10
export function show() {console.log('hello vue');}

import {x, show} from './ 按需导出.js'


console.log(x, show);

最初是咱们的间接导入，间接导入其实也挺罕用比方 css，或者 js 间接就是一段代码，能够间接导入进来不应用，他们本人有本人的用途

for(let i = 0; i < 5; i++) {console.log(i);
}

import './ 间接导入代码.js'

有一说一，这个代码块跟 typora 一样，看来这一步棋走对了。

2.

而后看到咱们的 promise 这个构造函数

2.1

先理解一下回调天堂的问题吧，什么叫做回调天堂，就是咱们多层嵌套回调函数，自身就是回调函数，还一层一层嵌套，他执行了才去执行外面的，其实也就是咱们的高阶函数，那么这个时候就有问题了，咱们要改下面的代码前面也要跟着改，而且大量冗余的代码可读性也差。

2.2

而后说回到咱们的 promise，没错它自身是个构造函数，而后他的 prototype 下面有一个.then 的办法，所以他的实例是能够用的，这个.then 是个什么办法，他就是用来预先指定胜利或者失败的回调函数的，胜利是必选参数，失败是可选。

比方咱们上面通过一个案例来说，基于回调来读取内容，一个文件夹上面三个 txt，以前的做法不必多说了的通过 fs 读完一个又在外面嵌套一个，这就是典型的回调天堂。

咱们的 fs 模块不反对 promise 的办法所以咱们须要下载一个包 then-fs

import thenfs from 'then-fs'


thenfs.readFile('./files/1.txt', 'utf-8').then((r1) => console.log(r1))
thenfs.readFile('./files/2.txt', 'utf-8').then((r2) => console.log(r2))
thenfs.readFile('./files/3.txt', 'utf-8').then((r3) => console.log(r3))

能够看到通过 promise 的办法可能输入进去，然而有一个问题程序不太对，这里是因为异步的起因，前面会说到

2.3

先来解决咱们的程序问题，怎么样能够让他们依照程序来呢？

想通一件事件，咱们的 thenfs 读取进去是一个 promise 的实例对象所以咱们能力在前面用 then 这个办法，如果咱们在胜利的回到函数里先输入而后返回下一个 promise 实例对象呢？

import thenfs from 'then-fs'

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

2.4

捕捉谬误

咱们 promise 有一个捕捉谬误的办法，避免后面因为什么货色产生谬误，而导致整盘解体，当然如果你大略晓得是哪里可能有点问题也能够吧这个办法前移，那么这样就会继续执行前面的

import thenfs from 'then-fs'

/* thenfs.readFile('./files/11.txt', 'utf-8').then((r1) => {console.log(r1);
    return thenfs.readFile('./files/2.txt', 'utf-8') // 这里不做失败的回调函数，当咱们胜利后是不是又通过 return 反悔了一个 thenfs 发明的 promise 的实例对象
}).then((r2) => {console.log(r2);
    return thenfs.readFile('./files/3.txt', 'utf-8')
}).then((r3) => {console.log(r3);
}).catch((err) => {console.log(err.message);
}) */

thenfs.readFile('./files/11.txt', 'utf-8')
.catch((err) => {console.log(err.message);
})
.then((r1) => {console.log(r1);
    return thenfs.readFile('./files/2.txt', 'utf-8') // 这里不做失败的回调函数，当咱们胜利后是不是又通过 return 反悔了一个 thenfs 发明的 promise 的实例对象
})
.then((r2) => {console.log(r2);
    return thenfs.readFile('./files/3.txt', 'utf-8')
})
.then((r3) => {console.log(r3);
})

2.5

promise.all 办法这是用来发动并行的异步操作的，什么意思，就是一个期待机制，多个异步操作，期待他们全副实现才会去执行 then 外面的函数

import thenfs from 'then-fs'

let arr =[thenfs.readFile('./files/1.txt', 'utf-8'),
    thenfs.readFile('./files/2.txt', 'utf-8'),
    thenfs.readFile('./files/3.txt', 'utf-8')
]

Promise.all(arr).then((r) => console.log(r))

留神输入为一个数组，并且输入程序使咱们数组外面的执行程序。

与之对应的还有一个 promise.race 办法，他与 all 一起都是发动并行操作，然而他是一旦有人执行完，就输入，意思就是最快的那一个

2.6

来一个案例，封装一个 promise 获取文件的函数，这个函数最次要的是要搞懂咱们的回调与 then 之间这的关系，return 一个 new promise 发明一个实例，而他只是模式上的 promise 实例对象，还须要往里面增加一个函数，这个函数两个参数就是用来承受 then 的两个胜利和失败的函数，所以这两个参数是函数，再在外面来读取，fs 的操作步骤，也有失败和后果去把后果给到方才对应的两个参数

import fs from 'fs'
function getTxt(Fpath,type) {return new Promise(function(suc, wro)  {fs.readFile(Fpath, type, (err, result) => {if(err) return wro(err.message)
            suc(result)
        })
    })
}

getTxt('./files/1.txt', 'utf8').then((r1) => {console.log(r1)
},(err) => {console.log(err)
})

2.7

简化异步操作。

方才咱们的不论是 all 办法还是按程序执行的函数是不是都是为了能让咱们的异步操作能依照程序执行进去，上面是不仅执行了异步操作而且还能依照程序执行进去的简化步骤用到 await、async

import thenfs from 'then-fs'

async function getFile() {const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8') 
    console.log(r1);
    const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8') 
    console.log(r2);
    const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8') 
    console.log(r3);
}

getFile()

function 中用到 await，函数就必须被 async 润饰。

不加 await 就是 promise 实例，加了就能返回值间接输入。

在 await 第一个之前是同步输入，前面都为异步工作

import thenfs from 'then-fs'
console.log('A');
async function getFile() {console.log('B')
    const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8') 
    const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8') 
    const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8') 
    console.log(r1,r2,r3);
    console.log('D');
}
getFile()
console.log('C');

这个你认为输入进去是多少？

ABCr123 最初 D

3.

事件流，工夫循环我本人口述一遍吧，之前也说过的，咱们的工作分为同步工作和异步工作，同步工作会优先在主栈道上执行完，异步工作会依据宿主环境在那里执行，然而异步工作都是有回调函数的，所以执行了就会把函数放到异步工作的排列队伍，等到同步工作执行完，就会来依照程序执行异步工作。

3.1

js 又把异步工作进一步划分了宏工作和微工作。

宏工作：比方 ajax、计时器、文件操作等

微工作：promise 那几个办法、prcess.nextTick 等

在异步工作中会优先执行宏工作再去查看这个宏工作外面的微工作，而后再去执行宏工作这样一个循环，来看一个经典面试题，你看输入的什么？

console.log('1');
setTimeout(() => {console.log('2');   
 new Promise (function(resolve) {console.log('3');
     resolve()}).then(function() {console.log('4');
 })
});
new Promise(function(resolve) {console.log('5');
    resolve()}).then(function() {console.log('6');
})
setTimeout(() => {console.log('7');   
    new Promise (function(resolve) {console.log('8');
        resolve()}).then(function() {console.log('9');
    })
   });

正确答案：156234789

这个最大的难点我感觉在于当咱们进入一个作用域后，会是一个全新的作用域，在这个外面再去从新对待外面的一些工作，就相当于你当初在这个作用域外面就是全局作用域

4.

进入 webpack。

webpack 实质上是一个第三方模块包，他能够起到压缩、翻译、打包、降级的作用。

webpack 环境筹备：

yarn init 初始化

yarn add webpack

在 package 外面增加执行命令“build”：“webpack”

反正 webpack 始终要记住一点他只反对 js，其余的都须要去文档上看怎么转过来。

而且他的操作也比拟法则化，先定义好文件，css 要有 css 文件，字体图标要有字体图标文件，而后要跟咱们的入口文件挂上钩，像 img 图片、字体图标这些须要动态创建在入口文件外面，css 间接导入，包含更改默认出入口，加载器、插件这些都是在 webpack.config.js 这个配置文件外面改。

另外的留神点就是咱们的图片解决只针对于 img 标签，背景图片会被 css 解析的，然而最好还是要做图片解决，因为如果 type 为 asset 的话，会以 8kb 作为一个辨别