随笔分类 - webpack/vite和NPM
摘要：一、unplugin-vue-components 插件 unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）作者是Vite生态圈大名鼎鼎的Anthony Fu。使用此插件后，不需要手动编写 import { Button }
阅读全文
摘要：一、为什么选择 Vite？ 1、问题背景 当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟）才能启动开发服务器，即使使用 HMR
阅读全文
摘要：Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在
阅读全文
摘要：一、问题背景 npm i 安装项目依赖时报错（npm 8.0.0） PS D:\code\ms> npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm E
阅读全文
摘要：一、依赖是什么 先说结论：有时候，依赖是一堆 可执行的代码 ；有时候，依赖只是 一句声明。怎么理解以上这句话呢？ 1、它可以是一堆代码 前端也好、后端也罢，开发的最终目的永远是实现功能，让代码成功地操作机器执行相关的任务。 想象一下，你要使用 vue.js 开发，但你不用自己实现一遍vue.js的核
阅读全文
摘要：npm 对于前端开发来说是一种必备的工具，对于开源项目来说，完全没有任何问题，安装包的依赖直接依赖于 Npm 即可。但是，对于公司内网的一些项目就不是太方便了。 对于 npm 公用包来说是比较方便的，直接引用即可。而内网的代码应该怎么引入呢？大概有以下几种方式： npm 公有包 npm 私有包
阅读全文
摘要：一、npm run serve时发生了什么？灵魂5问 1、npm run xxx 的时候，首先会去项目的 package.json 文件里找 scripts 里对应的 xxx，然后执行 xxx 的命令，例如启动vue项目 npm run serve 的时候，实际上就是执行了 package.json
阅读全文
摘要：正如 Webpack 官网所描述的，webpack最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源。 所以如果你想要搞明白 Webpack，就必须先对它想要解决的问题或者目标有一个充分的认识，带着问题再去理解它的很多特性，学习思路会更清晰，理解也会更深刻。 一、Webpac
阅读全文
摘要：pnpm 近年挺火的，英文里面的意思叫做 performant npm ，意味“高性能的 npm”，官网地址可以参考 https://pnpm.io/ 一、依赖管理 pnpm 在依赖管理这一块有一些不同于 npm/yarn 管理工具的一些优化技巧。 1、hard link 机制 介绍 pnpm 一定
阅读全文
摘要：最近看到涉及 node_modules 的问题比较多，所以决定深入学习一下，正好看到一篇文章，写的还挺详细的 Ryan对于node.js的十大遗憾之一就是支持了node_modules，node_modules的设计虽然能满足大部分的场景，但是其仍然存在着种种缺陷，尤其在前端工程化领域，造成了不少的
阅读全文
摘要：当我们使用 npm 上的第三方依赖包，如果发现 bug 时，怎么办呢？ 想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue，然后等待作者的修复，等待的时间不可控。那么这时候是不是就可以借助patch-package自己动
阅读全文
摘要：一、编写 Loader 和 Plugin 介绍及模板 1、Loader 本质及编写 Loader 在编写 Loader 前，我们首先需要了解 Loader 的本质。其本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 Loader 设为一个箭头函数。 函数接受一个参
阅读全文
摘要：Webpack 是一个用于现代JS应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 我们看一下Webpa
阅读全文
摘要：一、@rollup/plugin-inject 插件作用 这个插件的作用是：扫描模块代码，找到需要替换的全局变量，同时通过Import注入变量。比如：针对全局使用的Promise的地方：Promise.resolve(1);我们想要通过自己的某个polyfill来模拟该行为，比如用es6-promi
阅读全文
摘要：关于其构建过程理解，主要学习这篇文章：https://blog.csdn.net/qq_40882724/article/details/116860994 一、三个概念 首先，要理解三个重要的概念： （1）webpack构建：一个独立项目通过 webpack 打包编译而产生资源包。 （2）remo
阅读全文
摘要：一、如何共享模块 1、NPM 方式共享模块 想象一下正常的共享模块方式，就是 NPM。正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线。 对于项目 A 与 B，需要共享一个模块时，最常见的办法就是将该模块抽成通用依赖并分别安装在各自项目中。 2、微前端方式共享模
阅读全文
摘要：一、什么是微前端？ 微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一个 SPA 单页应用，随着时间累加，前端团队维护的 SPA 会随着业务增长越来越大，变得难以维护（项目启动耗时、CI\CD 耗时等）; 微前端可以帮助我
阅读全文
摘要：一、vue-cli 创建项目报错 我想用 vue-cli 4.5 创建一个 vue3 项目，但由于我之前的 node npm 之类的都是很早之前就安装的，所以出现了这样报错： You are using an outdated version of NPM. there may be unexpec
阅读全文
摘要：一、nvm 是什么 nvm 全名 node.js version management，是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs，主要解决 node 各种版本存在不兼容现象。 在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不
阅读全文
摘要：一、vue-cli 安装遇到问题 安装新版 vue-cli 命令：npm install -g @vue/cli，安装成功之后使用 vue -V 检查版本号，发现报错： PS D:\Program\nodejs\node_global> vue -V internal/modules/cjs/loa
阅读全文