前后端交互学习笔记三ES6模块化和Webpack

ES6模块化

ES6 模块化规范中定义：每个 js 文件都是一个独立的模块,导入其它模块成员使用 import 关键字,向外共享模块成员使用 export 关键字。

基本使用

1. node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：npm init -y配置初始环境
   • 确保安装了 v14.15.1 或更高版本的 node.js
   • 在 package.json 的根节点中添加 “type”: “module” 节点
2. 默认导出的语法： export default 默认导出的成员每个模块中，只允许使用一次 export default，否则会报错！

let n1 = 10
let n2 = 20
function show() {}
//默认
export default {
  n1:20,
  show
}

默认导入的语法： import 接收名称 from '模块标识符。默认导入时的接收名称可以任意名称，只要是合法的成员名称即可。

import m1 from './01.默认导出.js'
console.log(m1)//{ n1: 20, show: [Function: show] }

按需导出：：每个模块中可以使用多次按需导出

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {}
export default {
}

**按需导入：**按需导入的成员名称必须和按需导出的名称保持一致，按需导入时，可以使用 as 关键字进行重命名，按需导入可以和默认导入一起使用

import info, { s1, s2 as str2, say } from './03.按需导出.js'//info为默认，没有默认导出的时候值为{}，但是必须要有export default 

3. 如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，如：import './05.直接运行模块中的代码.js'

Promise

1. 多层回调函数的相互嵌套，就形成了回调地狱，即回调里面有进行了回调，为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。
2. Promise 是一个构造函数可以创建 Promise 的实例 const p = new Promise()
   Promise.prototype 上包含一个 .then() 方法. then() 方法用来预先指定成功和失败的回调函数。 p.then(成功的回调函数，失败的回调函数)。p.then(result => { }, error => { })调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的。
3. then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。可以使用连环 .then()方法为执行规定顺序，解决回调地狱。
   4.在 Promise 的链式操作中如果发生了错误，可以使用 catch 方法进行捕获和处理.

import thenFs from 'then-fs'
thenFs
  .readFile('./files/11.txt', 'utf8')
  .catch((err) => {
    console.log(err.message)//箭头函数，函数的简单写法
  })
  .then((r1) => {
    console.log(r1)
    return thenFs.readFile('./files/2.txt', 'utf8')
  })  
  .then((r2) => {
    console.log(r2)
    return thenFs.readFile('./files/3.txt', 'utf8')
  })

5. Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）. Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的 .then 操作（赛跑机制）
6. 自定义promise读取函数的操作，因为前面我们讲过读取函数的操作返回的是promise实例对象：

import fs from 'fs'
function getFile(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf8', (err, dataStr) => {
      if (err) return reject(err)
      resolve(dataStr)
    })
  })
}

async和await

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。上述情况下我们返回的是一个promise对象，使用await可以返回读取到的结果，但是如果使用await函数前就必须加上async。在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行，也就是先执行完所有从上到下的第一个await前的代码，在执行所有函数中在await之后的代码。

import thenFs from 'then-fs'
async function getAllFile() {
  const r1 = await thenFs.readFile('./files/1.txt', 'utf8')
  console.log(r1)//111
}
getAllFile()

EventLoop

1. JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。
2. JavaScript 把待执行的任务分为了两类：

• 同步任务（synchronous）又叫做非耗时任务，指的是在主线程上排队执行的那些任务
• 异步任务（asynchronous）又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境（如浏览器或者node.js）进行执行当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数,如函数这种比较复杂的就为异步任务。如下图所示：
  

JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）

宏任务和微任务

每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。promise函数里面是同步任务，但是后面的then是异步任务。

API接口案例

！！！注意：要想使用promise函数，在导入安装数据库的时候需要使用，mysql2！！！

Webpack

配置文档： https://webpack.docschina.org/concepts/#entry

1. webpack本质是, 一个第三方模块包, 用于分析, 并打包代码。
   ⚫ 支持所有类型文件的打包
   ⚫ 支持less/sass => css
   ⚫ 支持ES6/7/8 => ES5
   ⚫ 压缩代码, 提高加载速度
2. 使用方法，建议使用yarn 和npm类似，但是速度更快
   首先初始化：yarn init
   其次安装依赖：yarn add webpack webpack-cli -D //D代表安装到开发环境
   配置scripts：
   “scripts”: {
   “build”: “webpack”
   }
3. webpack如何使用
   • 默认src/index.js – 打包入口文件（注意一定要这样写，因为默认入口在这里）
   • 需要引入到入口的文件才会参与打包（即进行导入和导出进行关联）
   • 执行package.json里yarn build命令, 执行webpack打包命令
   • 默认输出dist/main.js的打包结果
4. 更改webpack打包默认的入口和出口：新建webpack.config.js，填入配置，修改文件名

const path = require('path');

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

5. 下载jq用yarn add jquery,在js直接使用就行不用再去官网下载对应的包，在js文件夹中直接使用import $ from 'jquery’导入即可
6. html-webpack-plugin插件：https://webpack.docschina.org/plugins/html-webpack-plugin/：以让该插件为你生成一个 HTML 文件（顺带所有的打包配置），不用再手动进行创建

• 下载插件：yarn add html-webpack-plugin -D
• webpack.config.js添加配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
};

webpack处理css文件

1. 安装css-loader和style-loader
2. 配置webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

3. 在入口引入css文件 import “./css/index.css”
   处理less文件yarn add less less-loader -D，配置webpack.config.js：随后再在入口处进行引入即可

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

webpack处理图片和字体图标

1. webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader
   文档: https://webpack.docschina.org/guides/asset-modules/
2. 配置webpack.config.js：

  rules: [ // 规则
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      }
    ],

3. 同时，我们需要在main.js中把文件引入进去：import imgObj from ‘./assets/1.gif’
4. 图片转base64打包进js中好处是减少浏览器发送的请求次数, 读取图片速度快，坏处是图片过大, 转base64占空间会多30%左右。
5. 处理字体图标：将字体图标引入到入口css文件中：import “./assets/fonts/iconfont.css”
   配置webpack.config.js：

 rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
        }
      }
    ],

webpack兼容性

1.下载babel 和babel-loader，babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法，babel-loader: 可以让webpack转译打包的js代码
安装：npm install -D babel-loader @babel/core @babel/preset-env webpack
2. 配置webpack.config.js：

 rules: [
    {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', // 使用这个loader处理js文件
          options: { // 加载器选项
            presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      }
    ],

webpack开发服务器（webpack-dev-server模块）

1. webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示
2. webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/
3. 首先下载 yarn add webpack-dev-server -D
   其次自定义webpack开发服务器启动命令serve – 在package.json里：

 "scripts": {
    "build": "webpack",
    "serve":"webpack serve"
  }

最后使用yarn serve 启动当前工程里的webpack开发服务器

这篇好文章是转载于：学新通技术网