合肥做网站便宜,wordpress文章运行php,巩义做网站汉狮公司,建设部招标网站模块化
一、模块化分类
回顾node.js模块化#xff1a;
node.js遵循了CommonJS的模块化规范【见下文】#xff0c;其中#xff1a; 1.导入其它模块使用require()方法 2.模块对外共享成员使用module.exports对象
模块化的好处#xff1a;
大家都遵守同样的模块化规范写代…模块化
一、模块化分类
回顾node.js模块化
node.js遵循了CommonJS的模块化规范【见下文】其中 1.导入其它模块使用require()方法 2.模块对外共享成员使用module.exports对象
模块化的好处
大家都遵守同样的模块化规范写代码降低了沟通的成本极大方便了各个模块之间的相互调用利人利己。
二、前端模块化的分类了解
在ES6模块化规范诞生之前JS社区已经尝试并提出了AMD国外requirejs)、CMD国内seajs淘宝、CommonJS(nodejs)等模块化规范。
但是这些由社区提出的模块化标准还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。如 1.AMD和CMD适用于浏览器端的JS模块化 2.CommonJS适用于服务器端的JS模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此大一统的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 ”模块路径“ 按需导入与按需导出
按需导出的语法export const a 10
按需导入的语法import {按需导入的名称} from 模块标识符} 一次性导入全部
语法import * as 变量名 from “路径 其它导入
导入导出总结
目前我们学习了两套导入导出的语法
Node环境默认的CommonJS语法 导出module.exports 内容导入const 变量 require‘xxx)ES6模块化语法ES Module) 导出export导入import总结 在node环境中仍然使用CommonJS语法在后期的项目开发中就使用ES Module
前端工程化
学习目标
转变对前端开发的认知在脑海中形成画面知道企业中真正的前端开发是什么样子的
前端工程化
实际的前端开发四个现代化
模块化js的模块化、css的模块化、资源的模块化组件化复用现有的UI结构、样式、行为规范化目录结构的划分、编码规范化、接口规范化、文档规范化、GIT分支管理自动化自动化构建、自动部署、自动化测试
什么是前端工程化
以模块化、组件化、规范化、自动化为基础进行前端项目开发的方式叫做前端工程化.工程化提供了一套标准的开发方案和流程让前端开发自成体系。
前端工程化的实现
早期的前端工程化解决方案 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让前端开发变得更高效 1.代码压缩混淆 2.处理浏览器端js的兼容性ES6模块化语法不能直接在浏览器中用,对ES6高级语法支持的不友好有兼容性问题 3.以模块化的方式处理项目中的资源
安装全部所需的包
目的一次性把今天所需的包全部安装好。
注意 如果开发阶段才需要的包安装时加上-dev,如loader、webpack有的包是打包后生产阶段也需要的就直接安装如echarts
webpack的基本使用
确保下载了webpack和webpack-cli在package.json的script节点下新增build脚本添加命令“build:webpack在终端中执行yarn build进行打包npm run build)
webpack可以把开发阶段用到的js、css、图片等融合在一起形成一个或几个文件这个融合的过程叫做打包。
webpack配置
在根目录下添加webpack.config.js文件
配置打包模式 生产模式的打包体积更小但是速度慢开发模式下的打包体积大但是速度快。
注意此处的webpack.config.js的名字可以是其它名字如果是其它名字如abc.js),那么需要在package.json的scripts脚本中添加为”build“”webpack --config abc.js 配置入口和出口 webpack中的插件
通过安装和配置第三方的插件可以拓展webpack的能力从而让webpack用起来更方便。
最常用的webpack插件有如下3个
clean-webpack-plugin 每次打包时自动清理dist目录
webpack-dev-server 类似node.js阶段用到的nodemon工具每当修改了源代码webpack会自动进行项目的打包和构建。
html-webpack-plugin webpack中的html插件可以通过此插件自定制index.html页面的内容。
clean-webpack-plugin
作用每次打包构建的时候自动清理dist目录下的旧文件保证dist目录的代码是最新的。
安装依赖包clean-webpack-plugin4.0.0
在webpack.config.js中增加配置 重新运行npm run build,即可将dist文件夹中没用的文件清理掉。
webpack-dev-server
作用可以让webpack监听项目源代码的变化从而进行自动打包构建。
安装包webpack-dev-server4.3.1
配置webpack-dev-server
1.在package.json-script中新增一个命令 2.在webpack.config.js配置文件中增加devServer节点对webpack-dev-server插件进行更多的配置 3.运行npm run serve命令
4.在浏览器中访问启动地址查看效果。
注意:凡是修改了webpack.config.js配置文件或者修改了package.json配置文件必须重启实时打包的服务。
html-webpack-plugin
作用自动把生成好的bundle.js注入到html页面中并且会把html文件打包进dist文件夹。
安装包 html-webpack-plugin5.3.2
在webpack.config.js中配置htrml-webpack-plugin 其它说明
1.会将初始的模板public/index.html)打包进dist文件夹
2.生成的index.html页面自动注入了打包的Bundle.js文件所以去掉public/index.html中所有的js引入代码重新打包。
命令
npm run dev 可以是一个自定义的指令用于执行其它与开发相关的任务如编译代码、运行测试等具体功能取决于项目的配置和定义。可以在开发环境或生产环境中运行具体取决于项目的配置和定义。它可以执行各种开发相关的任务无论是在开发过程中辅助开发还是在构建和部署的最终的产品或应用时使用。
npm run serve 用于启动开发服务器提供实时的开发环境支持自动重新加载和热模块替换这样可以在开发过程中实时查看代码更改的效果。一般用于开发环境。
npm run build 一般用于最终打包部署。
打包生成的文件去哪了
不配置webpack-dev-server的情况下webpack打包生成的文件会存放到实际的物理磁盘上严格遵守开发者在webpack.config.js中指定配置根据Output节点指定路径进行存放。配置了webpack-dev-server自动打包插件之后打包生成的文件存放到内存中不再跟output节点指定的路径存放到实际的物理磁盘上了提高了实时打包输出的性能因为内存比物理磁盘速度快更多。内存物理磁盘数据库
webpack打包处理文件模块过程 配置loader
配置css
在src中创建了abc.css在index.js打包入口中通过Import导入css文件直接打包会报错你可能需要一个适当的loader来处理这种文件类型。
下面配置loader,解决上面的问题
①安装包style-loader3.3.0和css-loader6.4.0
②在webpack.config.js的module-rules数组中添加loader规则如下module与mode同级 其中test表示匹配的文件类型use表示对应要调用的loader,注意
use数组中指定的loader顺序是固定的多个loader的调用顺序是从右向左调用
less-loader
:安装并配置 打包处理img标签引入的图片
public/index.html通过img src1.png/如果右srcset属性去掉 打包处理asset资源
如果需要在js中导入图片需要如下配置
注意使用asset来代替webpack4中的url-loader、file-loader、raw-loader maxsize不配置时最终打包时默认是8kb(8*1024),单位是b.
base64
它是一个字符串比原图大30%左右使用base64格式的字符串可以减少网络请求减轻服务器的压力。
实际开发中小图可以使用base64格式大图还是使用原图片。
配置babel
打包处理js文件中的高级语法
webpack只能打包处理一部分高级的js语法对于哪些webpack无法处理的高级js语法需要借助于babel-loader进行打包处理
例如webpack无法处理下面的js代码 安装babel-loader相关的包
babel-loader8.2.2
babel/core7.15.8
babel/plugin-proposal-decorators7.15.8
在webpack.config.js的module-rules数组中添加loader规则如下 配置babel-loader
在项目根目录下创建名为babel.config.js的配置文件定义babel的配置项如下 打包发布
为什么要打包发布
项目开发完成后需要使用webpack对项目进行打包发布主要原因有以下亮点
①开发环境下打包生成的文件存放于内存中无法获取到最终打包生成的文件。
②开发环境下打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行因此需要对项目进行打包发布。
配置webpack的打包发布
在package.json文件的scripts节点下新增build命令如下 --mode是一个参数项用来指定webpack的运行模式
production代表生产环境会对打包生成的文件进行代码压缩和性能优化。
注意通过--mode指定的参数项会覆盖webpack.config.js中的mode选项。
把js文件统一生成到js目录中
在webpack.config.js配置文件的output节点中进行如下的配置 最终npm run build打包结果的产出就是dist文件夹。
Source Map
目前的问题
开发环境中错误行号对应不上比如本来是在第23行报错了但是浏览器提示在第20行报错。
打包后又不希望我们的代码被其他人看到源码。
上述问题可以通过sourceMap解决。
sourceMap就是一个信息文本里面储存着位置信息。
也就是说Source Map文件中存储着压缩混淆后的代码所对应的转换前的位置出错的时候出错工具将直接显示原始代码而不是转换后的代码能够极大的方便后期的调试。
配置
开发环境
推荐在webpack.config.js中添加如下的配置即可保证运行时报错的行数与源代码的行数保持一致
设置如下值的好处是如果有错误程序员可以准确的知道错误行号并且可以在浏览器中看到源码方便程序员排错。
npm run serve如果有错误可以准确的找到错误去排错 生产环境
设置成如下值的好处是如果有错误可以避免源码的暴露
npm run build打包后有错误也不会暴露源码 总结
