模块化相关规范

模块化概述

• 传统开发模式的主要问题

  • 命名冲突
  • 文件依赖

• 通过模块化解决传统开发模式的问题

  • 模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块

  • 好处

    • 方便代码的重用
    • 提升开发效率
    • 方便后期维护

 

浏览器端模块化规范

• AMD

  • Require.js

• CMD

  • Sea.js

 

服务器端模块化规范

• CommonJS

  • 模块分为单文件模块 和 包

  • 模块成员导出

    • module.exports
    • exports

  • 模块成员导入

    • require('模块标识符')

 

ES6模块化规范

定义

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

babel

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

• npm install --save @babel/polyfill

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

• babel.config.js内添加

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

• 通过npx babel-node index.js执行代码

 

ES6模块化基本语法

• 默认导出与默认导入

  • 默认导出
    • export default 默认导出的成员

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

  • 默认导出
    • import 接收名称 from ‘模块标识符’

  //导入模块成员
  import m1 from './m1.js'
  console.log (m1)
  //打印输出的结果为:{ a: 10，c: 20,show: [Function : show ] }
  

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

 

• 按需导出与按需导入

  • 按需导出
    • export let s1 = 10

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

  • 按需导入
    • import {s1} from ‘模块标识符’

  //导入模块成员
  import { s1,s2 as ss2, say } from './ml.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'

 

webpack用法

当前Web开发面临的困境

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

 

webpack概述

是一个流行的前端项目构建工具(打包工具)

提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

webpack官网

webpack中文文档

 

webpack的基本使用

• 创建列表隔行变色项目

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

• 在项目中安装和配置webpack

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

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

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

  "scriptes":{"dev":"webpack"//script节点下的脚本,可通过npm run 运行
  }
  

  • 在终端中运行npm run dev命令,启动webpack进行项目打包

• 配置打包的入口与出口

  • 更改打包入口与出口

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

• 配置webpack自动打包功能

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

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

  • 将src -> index.html 中,script脚本的引用路径，修改为"/buldle.js"

  • 运行npm run dev命令，重新进行打包

  • 在浏览器中访问http://localhost:8080地址,查看自动打包效果

• 配置html-webpack-plugin生成浏览页面

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

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

  • 修改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 8888"
}，

 

webpack中的加速器

loader 加载器可以协助webpack打包处理特定的文件模块

loader官网

• 通过loader打包非js模块

  • less-loader 可以打包处理.less相关的文件
  • sass-loader 可以打包处理.scss相关的文件
  • url-loader可以打包处理css中与url路径相关的文件

• loader调用过程

 

webpack加载器的基本使用

• 打包处理css文件

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

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

  • test表示匹配的文件类型,use表示对应要调用的loader

  • use数组中指定的loader 顺序是固定的

  • 多个loader的调用顺序是:从后往前调用

• 打包处理less文件

  • 运行cnpm i less-loader less -D命令
  • 在webpack.config.js 的module -> rules 数组中，添加loader 规则如下:

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

• 打包处理scss文件

  • 运行cnpm i sass-loader node-sass -D命令
  • 在webpack.config.js 的module -> rules 数组中，添加loader 规则如下:

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

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

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

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

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

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

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

  • 运行npm i url-loader file-loader -D命令
  • 在webpack.config.js 的module -> rules数组中，添加loader 规则如下:

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

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

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

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

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

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

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

 

Vue单文件组件

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

• 问题

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

• 解决方案

  • 使用Vue单文件组件。

 

Vue单文件组件的基本用法

• 单文件组件的组成结构
  • template – 组件的模板区域
  • script – 业务逻辑区域
  • style – 样式区域

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

 

webpack中配置vue组件的加载器

• 运行npm i vue-loader vue-template-compiler -D命令
• 在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

• 运行npm i vue -S安装vue
• 在src -> index.js 入口文件中，通过import vue from 'vue’来导入vue构造函数
• 创建vue的实例对象，并指定要控制的el区域
• 通过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打包发布

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

 

Vue脚手架

Vue脚手架的基本用法

vue 脚手架用于快速生成vue 项目基础架构

Vue官网

• 使用步骤

  • 安装Vue脚手架

  npm install -g @vue/cli
  

• 基于版本的脚手架创建vue项目

//1．基于交互式命令行的方式，创建新版vue项目
vue create my-project
//2．基于图形化界面的方式，创建新版vue项目
vue ui
//3．基于2.x的旧模板，创建旧版vue项目
npm install -g @vue/cli-init
vue init webpack my-project

 

Vue脚手架生成的项目结构分析

 

Vue脚手架自定义配置

• 方法一

//必须是符合规范的json语法
"vue" :{"devServer" : {"port ":"8888","open" : true}
},

• 方法二
  • 创建vue.config.js

module.exports = {devServer:{open:true,port:8878}
}

 

Element-UI的基本使用

官方网址

Element-UI : 一套为开发者、设计师和产品经理准备的基于vue 2.0的桌面端组件库。

• 基于命令行方式手动安装

  • 安装依赖包 npm i element-ui -S
  • 导入 Element-UI相关资源

  //导入组件库
  import ElementUI from 'element-ui' ;
  //导入组件相关样式
  import 'element-ui/lib/theme-chalk/index .css';
  //配置vue 插件
  Vue.use(ElementUI);
  

• 基于图形化界面自动安装

  • 运行vue ui命令，打开图形化界面
  • 通过vue项目管理器，进入具体的项目配置面板
  • 点击插件->添加插件，进入插件查询面板
  • 搜索vue-cli-plugin-element并安装
  • 配置插件，实现按需导入，从而减少打包后项目的体积