六：前端工程化

1:概述

:模块化概述

传统开发模式的主要问题

1:命名冲突
2:文件依赖

通过模块化解决上述问题

模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
模块化开发的好处:方便代码的重用，从而提升开发效率，并且方便后期的维护。

浏览器端模块化规范

1：AMD

Require.js（http://www.require.js.cn/)

2:CMD

Sea.js  (https://seajs.github.io/seajs/doce/)

服务器端模块化规范

1:CommonJS
1):模块分为单文件模块与包
2):模块成员导出：module.exports和exports
3):模块成员导入：require('模块标识符‘)

大一统的模块化规范—ES6模块化

在ES6模块化规范诞生之前，Javascript 社区已经尝试并提出了AMD，CMD,CommonJS等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，例如
AMD和CMD只适用浏览器端的Javascript模块化
CommonJS 只适用于服务器端的Javascript模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化标准，是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义：

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

1:Node.js中通过babel体验ES6模块化

1:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2:
npm install --save @babel/polyfill

3:
项目跟目录创建文件babel.config.js

4:
babel.config.js 文件内容如下侧代码

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

5:
新建index.js文件
通过npx babel-node index.js执行代码

ES6模块化的基本语法

1:默认导出 与默认导入

默认导出语法 export default 默认导出的成员

//当前文件模块为m1.js
//定义私有成员 a 和 c
let a =10
let c =20
//外界访问不到变量d ,因为它没有被暴露出来
let d =30
function show(){}
//将本模板中私有成员暴露出来，供其它模块使用
export default{
	a,
	b,
	show
}

默认导入语法 import 接收名称 from ‘模块标识符’

//导入模块成员
import m1 from './m1.js'

console.log(m1)
//打印输出的结果为
//{a:10,c:20,show:[Function:show[}

注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

按需导出与按需导入

按需导出语法:
export let s1 =10

//当前文件模块为m1.js
//向外按需导出变量s1
export let s1='aaa'
//向外按需导出变量s2
export let s1='ccc'
//向外按需导出方法say
export function say =function(){}

按需导入语法 import {s1} from '模块标识符'

//导入模块成员
import {s1,s2 as ss2,say} from './m1.js'
console.log(s1) //打印输出aaa
console.log(ss2) //打印输出ccc
console.log(say)  //打印输出[function :say]

直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

//当前文件模块为m2.js
//在当前模块中执行一个for循环操作
for(let i =0;i<3;i++){
	console.log(i)
}

//直接导入并执行模块代码
import ./m2.js'

2:webpack开始

当前Web开发面临的困境

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

webpack概述

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

webpack的基本使用

1:创建列表隔行变色项目。

1):新建项目空白目录，并运行npm init -y 命令,初始化包管理配置文件 package.json
2):新建src源代码目录。
3)新建src ->index.html首页
4)初始化首页基本的结构。
5)运行npm install jquery -s 命令，安装jQuery
6)通过模块化的形式，实现列表隔行变色效果。

2：在项目中安装webpack
1):运行npm install webpack webpack-cli -D 命令，安装webpack相关的包。
2):在项目根目录中，创建名为webpack.config.js的webpack配置文件
3):在webpack的配置文件中，初始化如下基本配置。

module.exports={
	mode:'development' /mode用来指定构建模式
}

4):在package.json配置文件中scripts节点，新增dev脚本如下：

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

5:可以在终端中运行 npm run dev命令，启动webpack 进行项目打包。

配置打包的入口与出口

webpack的4.x版本中默认约定：
打包的入口文件src —>index.js
打包的输出文件为dist —>main.js
如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息。

const path=require('path')//导入node.js中专门操作路径的模块
module.exports={
	entry:path.join(__dirname,'./src/index.js'),//打包入口文件路径
	output:{
		path:path.join(--dirname,'./dist'),//输出文件的存放路径s
		filename:'bundle.js'//输出文件的名称。
}
}

配置自动打包的功能

1):运行npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具。
2):修改package.json -->scripts中的dev命令如下：

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

3):将src —>index.html中，scripts脚本中的引用路径，修改为“/buldle.js"
4):运行npm run dev 命令，重新进行打包。
5:在浏览器中访问：http://localhost:8080地址，查看自动打包效果。

注意:web-dev-server 会启动一个实时打包的http服务器。
webpack-dev-server 打包生成的输出文件，默认放到了项目根目录，而且是虚拟的，看不见的。

配置http-webpack-plugin生成预览页面

1）：运行npm install http-webpack-plugin -D命令，安装生成预览页面的插件。
2):修改webpack.config.js文件头部区域，添加如下配置信息；

导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin =new HtmlWebpackPlugin({//创建插件的实例对象。
	template:'./src/index.html',//指定要用到的模板文件。
	filename:'index.html'//指定生成的文件的名称，该文件存在于内存中，在目录中不显示。
}）

3)修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点

module.exports={
	plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表。
}

配置自动打包的相关参数

//package.json中配置
// --open 打包完成后自动打开浏览器页面
// -- host 配置IP地址
// -- port 配置端口
"scripts"{
	"dev":"webpack-dev-server  --open --host 127.0.0.1 --port 8080"
},

webpack中的加载器

通过loader打包非js模块。

在实际开发中，webpack默认只能打包处理以.js后缀名结尾的模块，其它非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。

loader加载器可以协助webpack打包处理特定的文件模块，比如：
less-loader可以处理.less相关的文件
sass-loader可以处理.scss相关的文件。
url-loader可以打包处理css中与url路径相关的文件。

webpack中加载的基本使用

1：打包css文件。
1):运行npm i style-loader css-loader -D命令，安装处理css文件的loader
2):在webpack.config.js的module -->rules数组中，添加loader规则如下:

//所有第三方文件模块的匹配规则
module:{
	rules:[
	{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

其中，test表示匹配的文件类型，use表示对应要调用的loader
use 数组中指定的loader顺序是固定的。
多个loader的调用顺序是：从后往前面调用
2:打包处理less文件
1):运行npm i less-loader less -D命令
2):在webpack.config.js的module —>rules数组中，调用loader规则如下：

//所有第三方文件模块的匹配规则
module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
	]
}

3:打包处理scss文件
1):运行npm i sass-loader node-sass -D命令
2):在Webpack.config.js的module —>rules数组中，添加loader规则如下：

//所有第三方文件模块的匹配规则
module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
	]
}

配置postCSS自动添加css的兼容前缀。

1):运行npm i postcss-loader autoprefixer -D命令
2）:在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置

const autoprefixer =require('autoprefixer')//导入自动添加前缀的插件
module.exports ={
	plugins:[atuoprefixer]//挂载插件
}

3)在webpack.config.js的module -->rules数组中，修改css的loader规则如下：

module:{
	rules:[
		{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
	]
}

打包样式表中的图片和字体文件。

1):运行npm i url-loader file-loader -D
2)在webpack.config.js的module —>rules数组中，添加loader规则如下：

module:{
	rules:[
		{
			 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940' },
	}
}

其中？之后的是loader的参数项
limit用来指定图片的大小，单位是字节(byte),只是小于limit大小的图片，才会被转为base64图片。

打包处理js文件中的高级语法

1):安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D
2):安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3):在项目根目录中，创建babel配置文件 babel.config.js并初始化基本配置如下：

module.exports={
	presets:['@babel/preset-env'].
	plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}   

4):在webpack.config.js的module ---->rules数组中，添加loader规则中如下:

//exclude为排除项，表示 babel-loader 不需要处理node_modules中解释文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

Vue 单文件组件

传统组件的问题和解决方案

1:问题

1.全局定义的组件必须保证组件的名称不重复。
2:字符串模板缺乏语法高亮，在HTML有多行的时候,需要用到丑陋的
3:不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏。
4:只有构建步骤限制，只能使用HTML和ES5的JavaScript,而不能使用预处理器(如:Babel)

2:解决方案

针对传统组件的问题，Vue提供了一个解决方案 ------使用Vue单文件组件。

单文件组件的组成结构

template组件的模板区域
script  业务逻辑区域
style 样式区域

<template>
<!-- 这里用来定义Vue组件的模板内容 -->
</template>
<script>
	//这里用来定义Vue组件的业务逻辑
	export default{
		data:(){return {}},//私有数据
		mthods:{}//处理函数
		//...其它业务逻辑
	}
</script>
<style scoped>
 /*这里用来定义组件的样式*/
</script>

<template>
    <div>
         <h1>这是 APP根组件</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {}
        },
        methods:{

        }
    }
</script>

<style scoped>
    h1{
        color:red;
    }
</style>

webpack中配置Vue组件的加载器

1):运行npm i vue-loader vue-template-compiler -D命令
2):在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin =require('vue-loader/lib/plugin')
module.exports = {
	module:{
		rules:[
		//..其它规则
		{test:/\.vue$/,loader:'vue-loader'}
		]
},
plugins:[
	//...其它插件
	new VueLoaderPlugin()//请确保引入这个插件！
	]
}

在webpack项目中使用vue

1):运行npm i vue -S 安装vue
2):在src -->index.js入口文件中，通过import vue from 'vue’来导入vue构造函数
3):创建vue的构造对象，并指定要控制的el区域
4);通过render函数渲染App根组件。
代码实例：

//1.导入Vue构造函数
import Vue from 'vue'
//2.导入App根组件
import App from './components/App.vue'
const vm =new Vue({
	//3.指定vm实例要控制的页面区域
	el:'#app',
	//4.通过render函数，将指定的组件渲染到el区域中
	render:h=>h(APP)
	})

webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令。

//在package.json文件中配置webpack打包命令
//该命令默认加载项目根目录的webpack.config.js配置文件
"scripts":{
//用于打包的命令
"build":"webpack -p"
//用于开发调试的命令
“dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
},