前端工程化
文章平均质量分 81
前端工程化学习笔记
Whoopsina
不问前程,但行其事
展开
-
Http-proxy-middleware安装报错proxy is not a function
CRA创建的项目中使用Http-proxy-middleware,首次安装无报错,重新运行时报proxy is not a function错;问题所在:因为下载的最新版本的Http-proxy-middleware,引入的方式发生改变解决办法:我们在src/setupProxy.js文件中修改如下参考资料...原创 2022-06-24 12:23:34 · 554 阅读 · 1 评论 -
前端模块化开发到底是什么?
文章目录前言模块化演变过程模块化规范的出现模块化的最佳实践ES Modules基本特性ES Modules 导出ES Modules导入导出的注意事项ES Module导入用法ES Module导入导出对象ES Module浏览器环境 PolyfillES Module在Node.js下支持情况前言前端的模块化开发经过长时间的演变现在已经趋于稳定,但是模块化的演变过程对于前端开发者的学习来说也是十分重要的,所以我总结了模块化的演变过程和当下最流行的模块化方案的基本使用,希望大家能有所收获模块化演变原创 2022-03-07 23:35:14 · 652 阅读 · 0 评论 -
如何在项目中使用git hook规范化代码
什么是Git Hooks?参考资料:官方文档简单的讲,所谓Hook,一般就是在特定时期提供一个可介入自定义的脚本;Husky大多数前端程序员对编写shell脚本是不熟悉的,这个时候就有个神奇的工具Husky来帮助我们实现Git Hooks的使用需求;npm install husky -D// 旧版本{ ..., "husky": { "hooks": { "pre-commit": "npm run test" } }}// 新版本{ "s原创 2022-03-02 23:30:01 · 1030 阅读 · 1 评论 -
【前端工程化】六:前端规范化标准及工具ESLint等基本使用
ESlint的基本使用最为主流的js lint工具 监测js代码质量ESLint很容易统一开发者的编程风格ESLint可以帮助开发者提升编码能力ESLint安装初始化项目安装ESLint模块为开发依赖npm install eslint -D通过CLI命令验证安装结果npx eslint -vESLint快速上手编写“问题”代码使用eslint执行检测,最新版本的eslint可以不需要配置配置文件npx eslint .\test.js --fix自动修复问题代码完成esli原创 2022-03-02 00:27:03 · 600 阅读 · 0 评论 -
【前端工程化】五:webpack5快速入门(四)
CSS抽离与压缩将Css文件单独提取一个文件中,推荐当css文件大于150kb时在考虑使用该插件,否则会多一次css的请求;开发环境中使用压缩性价比不高,所以一般在生产环境中使用;生产环境下,在loader中配置MiniCssExtractPlugin.loader代替style-loader,在插件中配置MiniCssExtractPlugin的输出路径用于抽离CSS ,配置CssMinimizerPlugin插件来压缩CSS代码**注意:**使用了插件以后,在css的loader配置中就不需要原创 2022-02-26 16:00:14 · 862 阅读 · 0 评论 -
【前端工程化】五:webpack5快速入门(三)
区分打包环境由于我们在不同环境下的配置不同,所以我们需要将不同环境的配置分别写在不同的文件中,并提取公共配置;对于不同环境下,我们传入不同的参数;"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "serve": "webpack serve", "build2": "webpack --config ./config/webpa原创 2022-02-23 23:18:27 · 436 阅读 · 0 评论 -
【前端工程化】五:webpack5快速入门(二)
webpack-dev-server要实现在开发时修改了文件可以自动编译展示,可以使用webpack的watch属性为true和vscode的live server插件,即观察模式// webpack.config.jsmodule.exports = { watch: true, ...}但是这样做有几个缺点:所有源代码都会重新编译因为我们使用了clean-webpack-plugin插件,所以每次编译成功以后都需要进行文件读写操作live server是vscode插原创 2022-02-20 17:09:28 · 754 阅读 · 0 评论 -
webpack5的HMR热更新不起作用
解决办法1:在配置文件中添加target: 'web’module.exports = { ..., target: 'web', devServer: { hot: true }, ...}解决办法2:删除目录下的.browserslistrc文件产生原因: 因为我们在开发阶段配置Mode为development,与我们配置的.browserslistrc文件的兼容性有冲突,官方建议我们使用taget: 'web’的方式来解决;...原创 2022-02-13 23:09:49 · 1014 阅读 · 0 评论 -
【前端工程化】五:webpack5快速入门(一)
webpack5webpack5相对于webpack4做了大量的升级和优化,因此webpack5的学习迫在眉睫!!首先我们需要下载webpack5,不推荐使用全局的webapck,为了统一webpack版本,建议将webpack和webpack-cli安装在开发依赖中,在学习webpack5之前,我们需要先具备一些基础知识;browserslistrc 工作流程browserslistrc是用来配置各种工具适配浏览器的范围,通过在 Can i use 上面的数据来查找;有两种配置的方法pac原创 2022-02-11 22:58:09 · 834 阅读 · 0 评论 -
【前端工程化】四:打包工具Rollup快速上手和Parcel的使用
Rollup相比于webpack,rollup要小巧的多,它仅仅是一款ES Module打包器,并不支持例如HMR等特性,它的初衷是提供一个充分利用ESM各项特性的高效打包器;Rollup快速上手yarn add roullup --dev下载之后rollup会提供一个cli程序,可以通过yarn或者npx来执行,避免我们通过路径去查找cl(这里和前面我们手动写的xp-web工作流类似)Usage: rollup [options] 必须指定 --format,即打包后的格式(amd, cj原创 2022-01-14 13:27:35 · 903 阅读 · 0 评论 -
【前端工程化】三:模块化开发之webpack4快速入门
模块化开发ESModules存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化需求,将所有ES6的代码编译成ES5或兼容性更好的代码,并且将转换后的代码打包成一个文件,并且支持不同类型的资源模块;前面两个需求可以使用前面学习的构建系统glup等,但是最后一个需求需要我们学习新的模块化打包工具;Webpack4yarn add webpack webpack-cli --devwebpack支持0配置打包,默认会将src/index.js ->dist/m原创 2022-01-13 22:56:24 · 618 阅读 · 2 评论 -
【前端工程化】二:自动化构建工具Grunt和Gulp的使用及封装工作流与发布
自动化构建在开发网页应用的时候,经常会有一些需要在开发阶段去重复执行的命令NPM Script是实现自动化构建工具流的最简单方式“build”: “sass scss/main.scss css/style.css --watch”,npm script的preserve钩子机制,在执行yarn serve之前执行yarn build;“preserve”: "yarn build,使用npm-run-all模块可以同时执行多个script任务;// npm install npm-ru原创 2022-01-09 21:51:22 · 657 阅读 · 0 评论 -
【前端工程化】一:脚手架工具yeoman以及plop的使用
脚手架的作用是创建项目基础结构,提供项目规范和约定,我们常用的三大框架也是有各自的脚手架生态原创 2022-01-05 22:32:25 · 903 阅读 · 0 评论