随笔分类 -  前端工程

1 2 下一页
构建工具加载npm包中的不同模块格式
摘要：可以在package.json 中的模块配置字段，告诉 Node.js、浏览器、打包工具（如 Webpack、Vite）或 TypeScript 如何正确识别、加载你的 npm 包，解决了不同模块规范（CommonJS/ES Module）、不同环境下的 “入口文件” 和 “类型定义” 匹配问题。 阅读全文
posted @ 2025-08-30 13:20 我是格鲁特 阅读(10) 评论(0) 推荐(0)
taro的实现原理
摘要：Taro 是一个跨平台的开发框架，目标是让开发者能够通过一套代码实现 多端（小程序、H5、React Native 等） 的应用开发。它的实现原理主要围绕编译时转换、运行时适配两大核心机制实现跨端能力。 一、编译时转换 1. 使用 Babel 转换为抽象语法树（AST） 代码解析： Taro 通过 阅读全文
posted @ 2025-04-23 10:45 我是格鲁特 阅读(272) 评论(0) 推荐(0)
webpack入口的写法
摘要：在 Webpack 中，入口（entry）决定了构建的起点。Webpack 支持 单入口 和 多入口，具体如何配置如下： 1. 单入口配置 适用于 单页面应用（SPA），即 Webpack 只从一个文件开始解析。 单入口时，值为字符串，也可以是字符串数组 const path = require(" 阅读全文
posted @ 2025-03-10 12:10 我是格鲁特 阅读(25) 评论(0) 推荐(0)
前端常用的模块格式有哪些?
摘要：前端中常用的模块格式主要有：CommonJS、ESM、AMD. 模块化方式特点使用场景代码示例 CommonJS 同步加载模块 主要用于 Node.js 环境 服务器端（Node.js）使用 module.exports 或 exports 对外暴露模块 使用require导入模块 const ad 阅读全文
posted @ 2025-03-09 22:25 我是格鲁特 阅读(11) 评论(0) 推荐(0)
webpack插件开发备注
摘要：在 Webpack 插件开发中，apply 方法是插件的核心入口。每个 Webpack 插件都是一个包含 apply 方法的对象，Webpack 在运行时会调用这个方法，将 Webpack 的编译器（compiler）对象作为参数传递给它，从而允许插件挂载到 Webpack 的事件系统中，并通过钩子 阅读全文
posted @ 2025-01-07 10:20 我是格鲁特 阅读(25) 评论(0) 推荐(0)
前端日志监控系统备忘
摘要：一、前端错误的捕获 在 JavaScript 日志系统中，捕获错误的范围应该全面，涵盖前端应用中可能出现的各类问题，包括语法错误、运行时错误、资源加载错误以及用户行为异常等。以下是不同类型错误的捕获方法： window.onerror: 可捕获常规错误（变量未定义、函数调用错误等）、计时器等错误，但 阅读全文
posted @ 2024-12-09 18:27 我是格鲁特 阅读(138) 评论(0) 推荐(0)
前端构建工具对比
摘要：特性WebpackRollupViteRspackSWCEsbuild 文件输入 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 原目录输出 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 ❌ 不支持 ✅ 支持 文件捆绑 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 阅读全文
posted @ 2024-11-12 18:14 我是格鲁特 阅读(738) 评论(0) 推荐(0)
firefox浏览器历史版本下载
摘要：http://ftp.mozilla.org/pub/firefox/releases/ 阅读全文
posted @ 2022-09-05 18:27 我是格鲁特 阅读(20) 评论(0) 推荐(0)
eslint相关问题
摘要：1. env中的es版本和parserOptions.ecmaVersion的区别？ "env": { "es2021": true }, "parserOptions": { "ecmaVersion": es2021 } parserOptions.ecmaVersion指示eslint解析器可 阅读全文
posted @ 2022-08-13 20:22 我是格鲁特 阅读(182) 评论(0) 推荐(0)
动态import的编译
摘要：es11(2020)实现了对动态import的支持： import('./dynamic.js').then(({ default: foo }) => foo()); 在使用rollup编译时，如果输出为cjs模块，则会被编译为： Promise.resolve().then(function ( 阅读全文
posted @ 2022-07-24 21:27 我是格鲁特 阅读(207) 评论(0) 推荐(0)
lodash包优化插件
摘要：https://www.npmjs.com/package/lodash-webpack-plugin 当使用 import isString from 'lodash-es/isString'这种带路径的导入方法时，传统的externals写法无效,见bug，需要使用单独的函数来处理，开源实现方案 阅读全文
posted @ 2022-07-01 07:34 我是格鲁特 阅读(117) 评论(0) 推荐(0)
webpack原理系列
摘要：范文杰的webpack系列文章 webpack5知识体系 阅读全文
posted @ 2022-05-28 09:20 我是格鲁特 阅读(19) 评论(0) 推荐(0)
阿里乾坤框架带来的问题
摘要：https://juejin.cn/post/6992944363798003743 阅读全文
posted @ 2022-04-26 22:51 我是格鲁特 阅读(304) 评论(0) 推荐(0)
webpack面试题
摘要：一、webpack热更新原理 1.使用 webpack-dev-server (后面简称 WDS)托管静态资源、提供websocket服务 2.webpack打包时会将HMR Runtime和源代码一起编译成 bundle 文件。HMR Runtime主要 负责接收服务发送的websocket消息， 阅读全文
posted @ 2022-04-26 11:54 我是格鲁特 阅读(34) 评论(0) 推荐(0)
前端性能优化指标评估
摘要：一、通用的指标 性能指标英文缩写描述该指标代表的问题 首字节时间 TTFB (Time to First Byte) 浏览器开始请求到接收到第一个字节数据的时间。 网络延迟、服务端慢、SSR 渲染慢 首次绘制 FP (First Paint) 浏览器首次在屏幕上开始绘制任何像素点的时间。 网络慢、H 阅读全文
posted @ 2022-04-25 16:56 我是格鲁特 阅读(31) 评论(0) 推荐(0)
babel-polyfill
摘要：刚接触bable的同学可能会认为使用了Babel，配置了preset预设后就可以愉快的使用 es6+做开发了，事实上，在默认情况下Babel只会做语法转换(let、const、class、箭头函数等)，而不做新api的转换，新的api总结起来分为两类： 全局对象和全局对象相关的方法，例如Promis 阅读全文
posted @ 2022-03-25 10:37 我是格鲁特 阅读(1899) 评论(0) 推荐(0)
babel-预设和插件
摘要：一、配置文件 几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样 阅读全文
posted @ 2022-03-25 10:35 我是格鲁特 阅读(338) 评论(0) 推荐(0)
前端性能优化总结
摘要：这篇文章总结得很好，查看 图片懒加载实现，点击跳转 阅读全文
posted @ 2022-03-21 11:39 我是格鲁特 阅读(49) 评论(0) 推荐(0)
Polyfill 方案的过去、现在和未来
摘要：https://github.com/sorrycc/blog/issues/80 阅读全文
posted @ 2021-05-20 10:09 我是格鲁特 阅读(37) 评论(0) 推荐(0)
Nginx rewrite 重写功能和Nginx的正则表达式
摘要：参考地址 阅读全文
posted @ 2021-04-02 14:18 我是格鲁特 阅读(62) 评论(0) 推荐(0)

1 2 下一页