前端工程化

模块化的相关规范

浏览器端模块化规范

AMD
典型代表是require.js
CMD
典型代表是Sea.js

服务器端模块化规范

典型的就是nodejs中的CommonJS模块化规范

• 模块分为单文件模块和包
• 模块成员导出：module.exports和exports
• 模块成员的导入：require("模块标识符")

大一统规范–ES6模块化规范

在ES6模块化规范诞生前，已经有上述的前后端模块化规范，但是这些模块化标准还是存在一定的差异性和局限性，并不是浏览器和服务器通用的模块化标准。为了解决这些问题，从而提出了ES6模块化规范

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

在node中通过babel中间件体验ES6模块化

1. npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2. npm i --save @babel/polyfill
3. 在项目根目录中创建文件 babel.config.js，代码如下面所示
4. 通过npx babel-node index.js 执行index.js中的代码

babel.config.js内容如下

const presets = [
	[
		"@babel/env",
		{
			targets: {
				edge: "17",
				firefox: "60",
				chrome: "67",
				safari: "11.1",
			},
		},
	],
];
module.exports = { presets };

ES6模块化的基本语法

默认导出，在每个模块中，只能使用一次export default

// export default 默认导出的成员
export default {
	a:10,
	b:20,
};

按需导出，可以多次按需导出，不会与默认导出冲突，可以共存

export let a = "123"
export function show = function(){}

默认导入

// import 接收名称 from "模块标识符"
import m1 from "./m1.js";

按需导入，按照需求导入部分内容，导入的内容名称需和模块中的名称保持一致

// import {模块中的成员} from "模块标识符"
import {a,show} from "./m1.js"

直接导入并执行，直接导入的模块会自动执行里面的代码

import "模块标识符"

webpack

当Web开发面临的困境

• 文件依赖关系错综复杂
• 静态资源请求效率低
• 模块化支持不友好
• 浏览器对高级JavaScript特性兼容性差
• …

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大工具，从而让程序员把工作的重心放到具体的功能实现上，提高开发效率和项目的可维护性

在项目中安装和配置webpack

运行命令安装webpack相关的包

npm install webpack webpack-cli -D

然后在项目根目录中，创建名为webpack.config.js的webpack配置文件
初始化配置如下

module.exports = {
		// mode有两个可选项，一个是development，一个是production
		// devement表示转换出来的代码不会压缩与混淆
		// production表示将代码进行压缩混淆，相应的转换过程会变慢
	mode:"development",
};

然后在package.json中的scripts节点下，新增dev脚本如下：

// 在scripts节点下的脚本，可以通过npm run dev来执行
"script":{
	"dev":"webpack"
}

然后在终端中运行命令即可对项目进行打包

npm run dev

打包后会将编译好的dist文件输出到main.js中，到时候使用时将script标签的引用改为main.js即可

配置打包的出口和入口

在webpack4.x中，已经默认指定了打包的入口为src目录下的index.js文件，而打包的出口为dist目录下的main.js文件
打包入口：src —> index.js
打包出口：dist —>main.js
如果要修改打包的入口与出口，可在webpack.config.js中新增如下配置信息：

const path = require("path");
module.exports={
	// 打包入口文件的地址
	entry:path.join(__dirname,"./src/index.js"),
	// 打包出口文件的地址
	output:{
		path:path.join(__dirname,"./dist"),
		// 输出文件的名称
		filename:"index.js",
	},
};

配置webpack自动打包功能

运行如下命令安装支持自动打包的工具

npm i webpack-dev-server -D

当然要注意webpack-dev-server与webpack5.x不兼容，因此建议安装以下版本才可顺利食用

npm i webpack@4.44.2 webpack-cli@3.3.8 -D

修改package.json中的scripts节点中的dev的值

"scripts":{
	"dev":"webpack-dev-server"
}

修改index.html文件中的script标签的src属性为：/出口文件名
比如我的打包出口文件名filename为index.js
则进行如下修改

<script src="/index.js"></script>

实际上在项目根目录中并不存在index.js这个文件，该虚拟文件存在内存中，而不是放在磁盘

最后通过http://localhost:8080/即可访问项目文件

webpack中的加载器

由于在webpack中只能默认打包处理.js后缀名的模块，其他非.js结尾的模块webpack默认处理不了，需要调用loader加载器才能正常打包，否则将会报错。
loader加载器可以协助webpack打包加载特定的文件模块，例如less-loader可以打包处理.less相关的文件，sass-loader可以打包处理.sass相关的文件

loader的调用流程

打包处理css文件

运行以下命令安装处理.css文件的加载器，当然在安装过程中仍然要注意版本问题，版本过高会导致报错

npm i style-loader@0.23.1 css-loader@2.1.0 -D

在webpack.config.js中添加module对象并在其中配置rules数组，添加loader规则

const path = require("path");
module.exports = {
	mode: "development",
	// 指定打包的入口地址
	entry: path.join(__dirname, "./src/index.js"),
	// 指定打包的出口
	output: {
		path: path.join(__dirname, "./dist"),
		// 指定打包出来的文件名称
		filename: "bundle.js",
	},
	// module中配置所有第三方文件模块的匹配规则
	module: {
		rules: [
			{
				// test用于匹配对应的文件类型
				test: /\.css$/,
				// use是使用到的loader加载器
				use: ["style-loader", "css-loader"],
			},
		],
	},
};