ES6模块化和webpack

ES6模块化

回顾：node.js 模块化

node.js 遵循了 CommonJS 的模块化规范【见下文】。其中：

• 导入其它模块使用 require() 方法
• 模块对外共享成员使用 module.exports  对象

模块化的好处：
大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。

前端模块化的分类 (了解)

在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD (国外 requirejs)、CMD (国内 seajs 淘宝)、CommonJS (nodejs) 等模块化规范
但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准
例如:

• AMD 和 CMD 适用于浏览器端的 Javascript 模块化
• CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的  ES6 模块化（ES Module）  规范诞生了！

Node环境使用ES6模块化的要求

node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照
如下两个步骤进行配置：

1. 确保安装了 v13.0.0 或更高版本的 node.js
2. 在 package.json 的根节点中添加 "type": "module" 节点

• type，默认是commonjs，表示项目代码 只能 使用 CommonJS 语法（只能使用 module.exports 导出，使用require导入）
• type 配置为 “module” 之后，表示项目代码 只能 使用 ES6模块化语法
  

ES6模块语法

ES6 的模块化，英文 ES Module ，主要包含如下几种用法：

• 默认导出与默认导入
• 按需导出与按需导入
• 导入全部
• 直接导入并执行模块中的代码
• 导入内置或第三方模块
  

默认导出与默认导入

默认导出的语法： export default 默认导出的成员
默认导入的语法： import 接收名称 from '模块路径'

• 导出

const a = 10
const b = 20
const fn  = () => {
  console.log('这是一个函数')
}
// 默认导出
// export default a  // 导出一个值
export default {
  a,
  b,
  fn
}

• 导入

// 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可
import result from './xxx.js'
console.log(result)

注意点:

• 每个模块中，只允许使用唯一的一次 export default
• 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可
  

按需导入与按需导出

按需导出的语法： export const s1 = 10
按需导入的语法： import { 按需导入的名称 } from '模块标识符'

export const a = 10
export const b = 20
export const fn = () => {
  console.log('内容')
}

按需导入的语法

import { a, b as c, fn } from './xxx.js'

注意事项：

• 每个模块中可以有多次按需导出
• 按需导入的成员名称必须和按需导出的名称保持一致
• 按需导入时，可以使用 as 关键字进行重命名
• 按需导入可以和默认导入一起使用
  

将所有内容全部导入

import * as obj from './03-按需导出.js'
console.log(obj)
/**
 * {
 *   uname: 'zhangsan',
 *   age: 20,
 *   fn: function ......,
 *   default: 'hello world'  // 叫做default这个，是默认导出的内容
 * }
 */

直接导入模块(无导出)

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。
此时，可以直接导入并执行模块代码，示例代码如下：
import '模块的路径'

//xxx.js
for (let i = 0; i < 10; i++) {
  console.log(i)
}
// 导入该模块
import './xxx.js'

实际的项目中，我们使用这种语法，导入css、less、图片等等资源

导入内置模块和第三方模块

// 内置模块，支持默认导入
import fs from 'fs'

// 内置模块，支持按需导入
import {
    readFile, writeFile } from 'fs'

// 第三方模块，肯定支持默认导入（按需导入不一定支持，因为我们并不知道别人的模块是怎么写的）
import dayjs from 'dayjs'

导入导出总结

目前，我们学习了两套导入导出的语法。

• Node环境默认的 CommonJS 语法
  • 导出：module.exports = 内容
  • 导入：const 变量 = require('xxx')
• ES6 模块化语法（ES Module）
  • 导出：export
  • 导入：import

总结：

• 在node环境中，仍然使用CommonJS语法；
• 后面的项目开发中，就使用 ES Module
  

前端工程化

学习目标
① 转变对前端开发的认知
② 在脑海中形成画面，知道企业中真正的前端开发是什么样子的

前端工程化

前端小白眼中的前端开发 vs 实际的前端开发

• 前端小白眼中的前端开发：
  • ① 会写 HTML + CSS + JavaScript 就是合格的前端程序员
  • ② 东拼西凑，不成体系
• 实际的前端开发（四个现代化）：
  • ① 模块化（js 的模块化、css 的模块化、资源的模块化）
  • ② 组件化（复用现有的 UI 结构、样式、行为）
  • ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
  • ④ 自动化（自动化构建、自动部署、自动化测试）
    

什么是前端工程化

• 概念
  • 以模块化、组件化、规范化、自动化为基础，进行前端项目开发的方式，叫做前端工程化
• 为什么进行工程化
  • 工程化提供了一套标准的开发方案和流程，让前端开发自成体系

注意： 企业中的 Vue 和 React 项目，都是基于工程化的方式进行开发的 前端工程化

前端工程化的实现

• 早期的前端工程化解决方案：
  • grunt（ https://www.gruntjs.net/ ）
  • gulp（ https://www.gulpjs.com.cn/ ）
• 目前主流的前端工程化解决方案：
  • webpack（https://webpack.docschina.org/）
  • parcel（ https://zh.parceljs.org/ ）
    

webpack 的基本概念

什么是 webpack

webpack 是前端项目工程化的具体解决方案。
webpack也是第三方模块，使用之前，需要下载安装。
参考文档：https://webpack.docschina.org/

为什么要学习 webpack

webpack 让前端开发变得更高效
① 代码压缩混淆
② 处理浏览器端 JavaScript 的兼容性
③ 以模块化的方式处理项目中的资源

注意：目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。

安装全部所需的包

目的：一次性把今天所需的包全部安装好。

# 切换镜像源
nrm use taobao

# 切换yarn镜像源
yarn config set registry https://registry.npmmirror.com

# 初始化
npm init

yarn init

# 安装项目依赖包
npm install echarts

yarn add echarts

# 安装项目开发依赖包
npm install webpack@5.73.0 webpack-cli@4.10.0 webpack-dev-server@4.9.2 style-loader@3.3.1 less-loader@11.0.0 less@4.1.2 html-webpack-plugin@5.5.0 html-loader@3.1.0 css-loader@6.7.1 cross-env@7.0.3 clean-webpack-plugin@4.0.0 babel-loader@8.2.5 @babel/core@7.18.2 @babel/plugin-proposal-decorators@7.18.2 @babel/preset-env@7.18.2 -D

yarn add webpack@5.73.0 webpack-cli@4.10.0 webpack-dev-server@4.9.2 style-loader@3.3.1 less-loader@11.0.0 less@4.1.2 html-webpack-plugin@5.5.0 html-loader@3.1.0 css-loader@6.7.1 cross-env@7.0.3 clean-webpack-plugin@4.0.0 babel-loader@8.2.5 @babel/core@7.18.2 @babel/plugin-proposal-decorators@7.18.2 @babel/preset-env@7.18.2 --dev

演示webpack 的作用

创建折线图项目

目的：以模块化的方式实现echarts图表的项目，为 webpack 的学习做准备。
具体步骤：
创建项目文件夹 webpack-demo，初始化，安装上面的这些包。
① 在 webpack-demo 中，新建 src 源代码目录
② 在 webpack-demo 中，新建 public 静态资源目录
③ src 目录中创建 index.js
④ public 目录中创建 index.html，引入index.js
⑤ index.html中创建一个具有宽高的div，id=“main”（准备放图表）
⑥ index.js 中，通过 ES6 模块化的方式导入echarts，实现一个简单的图表（参考echarts官方网站）

import * as echarts from 'echarts'

;(function () {
   
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  <