前端工程化
前端工程化工具
翘首等待
这个作者很懒,什么都没留下…
展开
-
babel - 语法降级与Polyfill消灭低版本浏览器兼容问题
babel-prest-env 仅仅只会转化最新的 es 语法,并不会转化对应的 API 和实例方法,比如说 ES6 中的 Array.from 静态方法。babel 是不会转译这个方法的,如果想在低版本浏览器中识别并且运行 Array.from 方法达到我们的预期就需要额外引入 polyfill 进行在 Array 上添加实现这个方法。最新ES语法,比如:箭头函数,let/const,class, async await。dev1 : 转换语法。原创 2023-09-01 13:49:26 · 644 阅读 · 0 评论 -
caniuse-lite browserslist 源码解析
browserslist 中根据 caniuse-lite 的 agents 数据,根据 browserslist.default 的浏览器配置信息,对 agents 的浏览器做一个筛选。data 目录下的文件。原创 2022-09-23 18:06:48 · 244 阅读 · 0 评论 -
前端 - 模块化
在前端开发领域,一个模块,可以是 JS 模块,也可以是 CSS 模块,或是 Template 等模块。JS 模块1.模块是一段 JavaScript 代码,具有统一的基本书写格式。2.模块之间通过基本交互规则,能彼此引用,协同工作。把上面两点中提及的基本书写格式和基本交互规则描述清楚,就能构建出一个模块系统。对书写格式和交互规则的详细描述,就是模块定义规范(Module Definition Specification)。Sea.js 遵循的是 CMD 规范。RequireJS 遵循的是 AMD原创 2022-03-14 17:24:09 · 2002 阅读 · 0 评论 -
webpack-dev-middleware - 源码解析
webpack-dev-middleware 的 作用:1.将 webpack 打包之后的文件右原来的放在磁盘中更改为放在内存中,加速了读取速度2.在 webpack 打包过程中3.使用了 webpack 的 watch 模式监听了文件的变更原创 2021-09-08 10:10:09 · 120 阅读 · 0 评论 -
webpack模块解析 - enhanced-resolve源码解析
enhanced-resolve:5.8.2原创 2021-08-20 17:38:45 · 658 阅读 · 0 评论 -
webpack插件系统 - tapable源码解析
tapable:2.2.0tap syncBasicMatcherRulePluginObjectMatcherRulePluginBasicEffectRulePluginUseEffectRulePluginNodeEnvironmentPluginHtmlWebpackPluginExternalsPluginChunkPrefetchPreloadPluginArrayPushCallbackChunkFormatPluginJsonpChunkLoadingPluginSt原创 2021-08-13 17:48:59 · 187 阅读 · 0 评论 -
webpack loader - loader-runner源码解析
webpack中使用 loader-runner 插件处理 loader 的收集和执行loader-runner:4.2.0loader-runner 导出两个方法:1.runLoadersrunLoaders中 iteratePitchingLoaders(遍历 loader 的 pitch,并执行 pitch 方法),iterateNormalLoaders (遍历 loader ,执行 loader 导出的方法)通过如下简单示例分析:(1)生成全局对象 loaderContext(2原创 2021-08-13 17:47:45 · 279 阅读 · 0 评论 -
webpack - 源码解析
webpack : 5.49.0原创 2021-08-11 11:23:01 · 313 阅读 · 0 评论 -
react-scripts - 源码解析
/bin/react-scripts.js根据参数调用scripts目录下的文件react-scripts的scripts文件中包含如下几个文件:init.js : 执行create-react-app命令创建项目时调用 (在 create-react-app - 源码解析中有介绍)start: 启用build: 打包test:eject:...原创 2021-06-19 16:09:23 · 246 阅读 · 0 评论 -
create-react-app - 源码解析
create-react-app主要实现的功能:1.将create-react-app中的yarn.lock.cached文件添加到创建的项目中(统一了依赖项的版本)2.创建新项目的package.json文件3.将上图中的四个依赖项下载,并且更改了react, react-dom的版本,添加 ^4.执行 react-script依赖项的 init.js文件,并出传入参数react-scripts init.js...原创 2021-06-19 11:24:01 · 203 阅读 · 0 评论