电子商务网站规划书,当当网网站建设案例,营销培训学院,wordpress 禁止爬虫文章主要介绍了前端工程化的相关内容#xff0c;包括 Node 环境、npm 包管理器及其命令、配置和镜像#xff0c;package.json 文件#xff0c;babel 和 polyfill 用于解决 JavaScript 兼容性问题#xff0c;以及 webpack 这一前端构建工具的作用、核心概念、构建流程、安装… 文章主要介绍了前端工程化的相关内容包括 Node 环境、npm 包管理器及其命令、配置和镜像package.json 文件babel 和 polyfill 用于解决 JavaScript 兼容性问题以及 webpack 这一前端构建工具的作用、核心概念、构建流程、安装使用等。 00、前端搬砖框架
开发 ⇨ 构建 ⇨ 部署上线 ⇨ 摸鱼 01、Node.js/npm ☘️
Node.JS 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境不是JS库是C开发的是用来解释执行JavaScript 代码的。我们开发Web应用中的JavaScript 代码都是运行在浏览器上有了Node.JS就可以用JavaScript 来开发中间件、后端服务了。
我们在VSCode中用到的很多组件都是基于Node.JS来开发运行的如构建工具webpack、vue-cli。 1.1、什么是npm
npmNode Package Manager为Node.JS的包管理器用来管理JS组件模块的包括安装、卸载、管理依赖等。很多语言都有自己的包管理器如Java的maven、.Net的Nuget等。 npm仓库(registry)官方的 npm仓库 存放了大量的、几乎所有的 JS组件轮子。在这里你会发现你不是一个人在战斗大家开源的各种前端组件库都是发布到这个集中式的大仓库里使用npm工具就可以从仓库里学习copy、安装使用各种组件了。
1.2、什么是yarn/pnpm?
yarn、pnpm的作用同npm一样都是包管理工具使用方式都比较相似。
npm这是Node.js官方自带的包管理工具yarn由于早期npm存在一些不完善的问题于是一些大公司推出了yarn。npm完善受yarn的反向推动后来npm逐步升级完善。pnpm一个比较新包管理工具相比npm、yarn有更好的下载速度、磁盘管理、依赖管理。
1.3、npm命令/配置
NodeJS官网 下载安装包安装Node.JS的时候就自带npm了可以直接使用。npm是一个命令行工具指令都是在cmd命令行工具中执行的常用指令如下
常用指令说明node -v查看nodeJS版本也用来验证node是否安装node进入node命令环境可运行任何JavaScript代码了console.log(hello world)在node环境中执行JS代码npm -v查看npm版本npm install -g 包名称版本号安装一个模块可指定版本号-g 表示全局安装。npm install -g vuex3npm uninstall 包名称卸载一个模块npm update 包名称更新模块npm list -g查看所有全局安装的模块npm list 包名称查看模块的版本信息npm list vuexnpm initnpm初始化会生成一个 package.json 文件npm install自动安装 package.json 文件中的模块npm install -save 包名称在package文件的dependencies写入依赖用于生产环境。简写 npm i -Snpm install -save-dev 包名称在package文件的devDependencies写入依赖开发环境。简写npm i -Dnpm cache clean -f清除缓存
配置本地的包存储目录新建npm包的文件夹用于存放包的资源。
全局npm包存储路径 node_global npm config set prefix D:\Project_Files\npm\node_globalnpm包的缓存路径 node_cachenpm config set cache D:\Project_Files\npm\node_cache
环境配置修改环境变量系统属性 ➤ 环境变量。重启一下VSCode、命令行工具才生效。
❶ 添加一个系统变量系统变量 ➤ 新建变量名NODE_PATH变量值 上面准备好的全局npm包的路径下的模块路径D:\Project_Files\npm\node_global\node_modules。❷ 添加Path路径打开系统变量列表中的Path变量新建一个值全局npm路径D:\Project_Files\npm\node_global
到这里就完成了基础配置了可以通过命令安装组件了。 npm仓库镜像默认的npm仓库在国外下载可能不稳定、比较慢可以改为国内的淘宝镜像每10分钟更新一次。
查看包的仓库地址npm config get registry设置仓库地址为淘宝镜像npm config set registry https://registry.npmmirror.com/或者安装cnmp插件npm install -g cnpm --registryhttps://registry.npmmirror.com
在VSCode中使用
设置 Terminal › Integrated › Default Profile: Windows 的选项值为一个命令行工具推荐“Git Bash”重启VS就可以VSCode中的终端使用npm指令了。 1.4、package.json
每个项目都有一个 package.json 文件内容是一个json对象。用于定义项目依赖的各种模块及项目配置信息、模块的配置信息。命令 npm init -y可创建一个初始package.json文件。
{name: vuep3, //*项目/模块名称version: 0.1.0, //*项目版本格式为「主版本号. 次版本号. 修订号」private: true, //是否私有scripts: { //npm 脚本命令通过 npm run 执行命令serve: vue-cli-service serve, //启动vue-cli-server服务build: vue-cli-service build, //编译test:unit: vue-cli-service test:unit, //执行单元测试lint: vue-cli-service lint //执行代码检查},dependencies: { //生产环境项目依赖通过npm install -save 包名称安装组件或npm i -Score-js: ^3.8.3, //key为模块名value为模块版本号vue: ^2.6.14 //},devDependencies: { //开发环境项目依赖开发、编译中使用不会输出到生产环境安装指令npm i -Dbabel/core: ^7.12.16,babel/eslint-parser: ^7.12.16,vue/cli-plugin-babel: ~5.0.0,vue/cli-plugin-eslint: ~5.0.0,vue/cli-service: ~5.0.0,vue/eslint-config-airbnb: ^6.0.0,eslint: ^7.32.0,eslint-plugin-import: ^2.25.3,eslint-plugin-vue: ^8.0.3,eslint-plugin-vuejs-accessibility: ^1.1.0,vue-template-compiler: ^2.6.14},eslintConfig: { //检查文件配置root: true,env: {node: true},extends: [ plugin:vue/essential, vue/airbnb ],parserOptions: {parser: babel/eslint-parser },rules: {}},browserslist: [ //项目需要兼容的浏览器配置处理js、css兼容性是会用到 1%,last 2 versions,not dead]
}package.json文件中版本号的说明版本号格式「主版本号. 次版本号. 修订号」。
~匹配最新的修改的版本号~1.2.3 匹配 1.2.x 中最新的版本。^匹配最新的此版本修订版本号^1.2.3 会匹配 1.x.x 中最新的版本。*匹配最新的x.x.x版本。 02、babel/polyfill 为何物❓
babel 是用来编译JavaScript代码的解决JavaScript兼容性问题的。 2.1、什么是polyfill
polyfill 意为 腻子 /垫片目的是解决JavaScript代码的兼容性问题解决方式就是用浏览器支持的方式模拟实现一遍。如ES2015 的很多不错的特性在一些古老的浏览器下存在兼容性问题如异步promise、map、新API方法等。于是就有了替代方案如下示例代码判断如果不支持promise则模拟实现一个这就称之为 polyfill polyfill/ˈpɒli fɪl/ 腻子脚本。
window.Promise (function(window){if(window.Promise){return window.Promise}else{window.Promise function(){ } // 兼容代码模拟实现}
})(window)于是各种各样的polyfill就出现了为了统一规范和管理于是出现了 babel
2.2、什么是babel
babel 是一个针对ECMScript语言兼容性处理的工具链babel /ˈbeɪbl/ 巴别塔一座通往天堂的高塔来自圣经的故事将ES2015的代码转译为向后兼容的JavaScript代码。其核心功能就是转译代码转译过程简单来说先对JS代码进行词法、语法分析抽象为语法树然后对语法树进行变换和代码生成。第二步就有很多babel的工具链插件参与了用于不同类型代码的转换生成。 ❓babel能干什么
语法转换如let、const、箭头函数等新的语法。polyfill代码如异步promise、map、新API方法等。需引入插件如babel/polyfill由于存在全局污染重复代码问题被废弃babel/plugin-transform-runtime 代替其他代码转换如TypeScript、JSX。
❓大量的冗余代码怎么办
使用babel可以在代码编译的时候就解决所有的JS兼容性问题。但问题是冗余JS代码会比较多有些客户的浏览器比较先进并不需要polyfill或只需要少量即可也要加载这么多JS。于是有两个解决方法
静态按需引入在编译时指定需要兼容的浏览器及版本按需引入polyfill如babel/preset-env插件useBuiltIns 参数设置需兼容的浏览器。动态按需引入把polyfill代码放到服务器上客户端动态的判断浏览器的情况再请求polyfill代码如polyfill.io方案。
❓怎么使用 简单了解下
安装babel核心库babel/core安装插件babel的工具链插件/预设preset预设的插件集合通过babel/cli指令或者webpack、vue-cli来执行babel编译转换。
2.3、Vue-cli中的babel
vue-cli中使用了vue/babel-preset-app预设包含了babel-preset-env、JSX 支持以及为最小化包体积优化过的配置可以通过 babel.config.js 进行配置。 03、webpack速览
vue-cli 是建立在webpack基础之上的简化了繁琐的webpack配置和使用先初步了解下webpack基本原理和流程。 3.1、webpack是干什么的
webpack 是一个强大的前端构建工具也是基于Node.js开发和运行作用就是把开发态的各种代码编译构建、打包为浏览器可更好运行的代码。webpack配置灵活包含丰富的扩展插件webpack的各项能力也都是通过这些插件来完成的。 ✔️核心作用提高开发效率 ✅代码编译提高写Bug效率可以愉快的利用模块化、现代的ES6语法及高级的CSS。 CSS代码编译less、sass的转换CSS兼容性补全等。JS代码编译ES6语法的兼容性转利用babel/polyfill相关插件代码校验对CSS、JS代码的规范性校验检查ESLint插件热更新开发态修改代码动态更新页面实时预览方便开发调试。✅代码优化 模块依赖处理各种第三方组件的依赖避免重复加载、冲突。代码模块打包代码合并、压缩减少体积、网络请求次数。代码混淆提高代码安全性。资源优化不限于JS、CSS支持处理各种资源如小图优化内嵌到代码中。 在webpack中每个文件都是模块webpack 按照一定规则来加载、编译这些模块。 webpack 核心概念
entry 入口 从哪里开始从一个根文件入口如“./src/main.js”。output 出口 到哪里去文件编译输出位置如“./dist”。loader 加载器 对源码进行转换不同类型模块文件采用不同的加载器来编译转换。 css代码css-loader、less-loader、sass-loader、postcss-loader ... 。图片资源url-loader、file-loader ... 。HTMLhtml-minify-loader 压缩。Javscriptbabel-loader转换ES6文件到ES5babel是webpack内置的JS编译器组件。...等等。plugin 插件 处理加载器完成不了的功能通过webpack暴露的API和生命周期钩子来执行各种处理所以插件可以在打包的不同阶段参与。 打包输出文件处理拆分chunk以控制输出的文件如提取css到一个单独文件。vue中复制public到输出目录的copy-webpack-plugin。每次打包前清空dist目录的 clean-webpack-plugin。
3.2、构建流程
webpack的构建是一个串行过程这个过程就是把各个插件loader、plugin串联起来执行。✏️画图图吧大概这样子的 ① 初始化
读取并组装配置信息进行初始化配置信息来源包括配置文件、cli参数、默认配置。初始化插件、配置插件的参数。
② 编译
从entry入口文件开始vue中入口文件默认为“./src/main.js”递归找到所有的依赖模块调用相应的loader编译处理文件内容。产生chunkchunk/tʃʌŋk/ 块是webpack构建过程中的块一个chunk包括等多个模块为某个入口文件找到的所有依赖模块。然后webpack根据配置为chunk 生成资源列表chunk assets最终输出到文件。 ③ 输出
根据配置确定输出的路径、文件名输出到文件系统。
3.3、安装使用
npm安装webpack、webpack-cli两个组件。
//1.全局环境安装webpack
npm install webpack -g
//2.进入项目目录
npm init -y //初始化npm-y忽略询问
npm install webpack webpack-cli --save-dev //安装webpack、webpack-cli 到开发环境webpack.config.js文件简介
var path require(path);module.exports {//模式 开发模式打包的是未压缩文件mode:development,// 入口文件是模块构建的起点同时每一个入口文件对应最后生成的一个 chunk。entry: ./src/main.js// 生成文件是模块构建的终点包括输出文件与输出路径。
output: {path: path.resolve(__dirname, dist),filename: [name].js
},
// 这里配置了处理各模块的 loader 包括 css 预处理 loader es6 编译 loader图片处理 loader。
module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: babel-loader,options: { presets: [babel/preset-env] }}}{ test: /\.css$/, use: css-loader },{ test: /\.ts$/, use: ts-loader }]},
// webpack 各插件对象在 webpack 的事件流中执行对应的方法。
plugins: [new webpack.HotModuleReplacementPlugin()
]
};package.json中添加构建指令就可以运行了npm run build来编译代码了。
scripts: {build:webpack
},04、express搭建简易服务器 ✅
express 是一个基于Node.js 的组件用于搭建一个WEB服务器使用非常简便、灵活express /ɪkˈspres/ 快速、快递。有必要了解一下就可以自己开发服务端API了。
express 是 Node.js 官方推荐的Web开发框架使用广泛除了核心http服务还有很多功能。如静态资源服务、模板解析可用于服务端渲染、丰富的插件支持等。如果要创建一个完整的后端项目可以借助express的脚手架组件搭建一个更完整的web框架。
①、准备环境先创建一个项目文件夹 server-express
//1、创建一个项目文件夹 server-express
//2、进入项目目录
cd ../server-express
//3、初始化npm
npm init -f
//4、安装express
npm install express -D②、编写服务端程序创建一个index.js
//引入express模块注意该代码是要基于Node.js运行需要用Node的模块写法
let express require(express);
let path require(path);
//创建express实例
let server new express();
//设置静态资源访问就可以直接访问./static 目录的静态资源了
server.use(/static,express.static(path.resolve(__dirname, ./static)));
//启用json解析支持用于解析body的json数据
server.use(express.json());
//添加监听端口
server.listen(3000, err {if (!err)console.log(服务器端启动成功地址http://localhost:3000);
})//配置API路由get
server.get(/user/:userId, (req, res) {//req.params 获取路由动态参数req.query获取url上的get参数同vue-routerconsole.log(req.params, req.query);//返回响应数据res.json({ id: req.params.userId, name: sam, age: 30 });
})
//配置API路由post
server.post(/user/add, (req, res) {//req.body 获取post数据console.log(req.body);//返回响应数据res.send({ status: OK, message: 更新成功 });
})③、运行node index.js
//启动服务端
$ node index.js
服务器端启动成功地址http://localhost:3000//测试
http://localhost:3000/static/img01.jpg
http://localhost:3000/user/100?typevip
http://localhost:3000/user/add // post: {name: 张三, age: 40}#参考资料
带你入门前端工程面试官Webpack系列Webpack5.0学习总结-基础篇链接https://juejin.cn/post/7181628057877217340
