![](https://img-blog.csdnimg.cn/20210413165006154.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
包管理
文章平均质量分 75
npm 管理
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
vite中加载使用svg
vite-plugin-svg-icons用于生成 svg 雪碧图.特征预加载 在项目运行时就生成所有图标,只需操作一次 dom高性能 内置缓存,仅当文件被修改时才会重新生成安装 (yarn or npm)node version: >=12.0.0vite version: >=2.0.0yarn add vite-plugin-svg-icons -Dornpm i vite-plugin-svg-icons -D使用vite.config.ts ...转载 2021-09-24 15:53:21 · 5169 阅读 · 0 评论 -
FE.TOOL-npm(v7) js包管理扫盲与进阶
扫盲npm init普通模块用 npm init作用域模块用 npm init --scope=@scope-namenpm init --yes or -y 会从当前目录提取的默认值 name:当前目录名称 version: 总是 1.0.0 description:自述文件中的信息,或者为空字符串 "" scripts:默认情况下会创建一个空test脚本 keywords: 空 author: 空 license: ISC bugs:来自当前转载 2021-09-08 10:25:08 · 364 阅读 · 0 评论 -
vite events.js:292 throw er; // Unhandled ‘error‘ event Error: spawn esbuild.exe ENOENT
报错信息报错原因: 找不到,esbuild/esbuild.exe 这个文件。打开目录去查找,发现还真的没有解决办法在当前目录下面,执行: node ./node_modules/esbuild/install.js. ,然后就会自动安装生成一个esbuild.exe 的文件文件生成:效果,启动成功解决这个问题的原issue 是在https://github.com/vitejs/vite/issues/1361,一个esbuild的bug...原创 2021-04-25 10:45:30 · 3891 阅读 · 6 评论 -
esbuild 配置开发环境
esbuild 相信在使用过vite的同学都知道,vite是开发环境使用的是esbuild来进行编译代码的,生成环境打包使用的是rollup,想看rollup的同学,可以查看我的往期文章。(实战 rollup 第一节入门) (rollup 实战第二节 搭建开发环境)(rollup 实战第二节 搭建开发环境)使用方式esbuild的官网里面有说明,esbuild的使用方式,提供三种方式: cli, js, go搭建开发环境既然需要使用esbuilld, 那肯定是需要安装esbu.原创 2021-07-31 17:28:56 · 4491 阅读 · 0 评论 -
Webpack HMR 原理解析
Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。例如,在开发 Web 页面过程中,当你点击按钮,出现一个弹窗的时候,发现弹窗标题没有对齐,这时候你修改 CSS 样式,然后保存,在浏览器没有刷新的前提下,标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修转载 2021-07-30 14:43:54 · 701 阅读 · 0 评论 -
rollup 实战第三节 打包生产
前面讲过了,rollup如何打包开发环境。现在肯定是打包成生产环境了。本次需要实现的功能是把库打包成生产环境。由于本次代码是基于前两次的基础上的,如果有问题的还请移步前两节。 (实战 rollup 第一节入门)(rollup 实战第二节 搭建开发环境)打包生umd, cjs, esm的文件vue 源码打包的分为以下几种(umd, cjs, esm)react 源码打包也是上面的三种(umd, cjs, esm)所有的学习都是从模仿开始,那咋们也来配置一下,打包成这三种类型的js.打包.原创 2021-07-25 14:37:51 · 3319 阅读 · 5 评论 -
npm 如何测试自己本地的包(npm link, npm install ./package)
最近在写学习 rollup 如何配置 打包生产环境。rollup定位是用来打包代码库的,Vue, React 等著名的前端框也是基于 rollup 来打包的。但是在发包之前,是需要对包进行安装测试的。(这里的测试分单元测试和安装测试)目录结构外部测试package.json由于外部的包安装的比较少,所以node_modules 里面的内容肯定是不多的。如下:包的package.json可以看到,里面包的依赖很多,比外面多很多。包里面的内容方式经过本人的尝试,有两种方式.原创 2021-07-22 22:47:49 · 2565 阅读 · 5 评论 -
rollup 实战第二节 搭建开发环境
引言在上一篇博客中,我简单的描述了 rollup 怎么使用,配置文件的使用。这一篇,来一起学习一下 rollup 怎么搭建开发服务,这里不包含任何的框架代码,我们需要 实现的是 ,我 在代码中修改任何地方,rollup可以自己监听到,并且给我给我更新浏览器就行。 这里的代码包括 css, 以及js等。目录说明my-rollup //项目名称├─ build // 打包文件夹│ └─ rollup.config.dev.js // 开发环境配置文件├─ dist // 开发环境编译的结原创 2021-07-19 22:13:47 · 1354 阅读 · 2 评论 -
webpack 4升级到 webpack 5 (node 14.6 升级到 node16 引发的问题)
最近node 更新了,我从 node14.6 升级到 node 16.4, 对于我新的项目来说,木有任何问题。但是今天要求在老项目中进行添加需求,发现代码运行竟然报错。项目启动报错第一次启动项目报错,报错内容是 Node Sass does not yet support your current environment: Windows 64-bit, 这个问题相信大家都清楚, node-sass 出问题了按照以往的经验,删除 node_modules, 然后重新按照 node-sass, .原创 2021-07-15 13:04:22 · 4855 阅读 · 3 评论 -
实战 rollup 第一节, 入门
rollup 是啥,咋不过多介绍,这里记录一下自己在看rollup文档和相关资料,然后手动来敲一些代码,并且以博客的形式输入,加深自己的理解本次的目标熟悉一些基本的配置,相比webpack来说,配置项还是少了许多的,虽然webpack既有 plugin, 也有loader。 但是 rollup 貌似是只有plugin的。既然是打包工具,那么肯定先打个包在说。多个文件相互引入,然后输出打包结果。目录my-rollup //我的项目名称├─ build // 配置的打包目录│ └.原创 2021-07-14 13:48:48 · 810 阅读 · 0 评论 -
网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)
这些天个人博客网站终于写好了,使用的技术是react17 + vite + redux + saga + ts等,后台使用的是 node + koa + mysql + ts ,前台地址是: http://blogs.chenliangliang.top/前端代码地址: https://github.com/cll123456/blog服务端代码地址: https://github.com/cll123456/my-blog-serve问题描述项目是写好了,但是我的首页加载出来竟然要20多s.原创 2021-07-11 10:05:18 · 7129 阅读 · 10 评论 -
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
npm 安装 dva的时候直接报错,信息如下:问题原因安装的包与已经存在的包有冲突解决办法npm install xxx -- force或者npm install xxx --legacy-peer-deps这样就可以安装成功了,网友说是npm的包的版本太高了。但是我决定升级后是有这个原因。但是目前我无法确定 -- force 与--legacy-peer-deps的区别,希望有明白的人在下面回复,技术人帮助技术人,谢谢!效果...原创 2021-05-09 21:45:50 · 25419 阅读 · 10 评论 -
npm : 无法加载文件 D:\soft\codeProcess\node\node_global\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.micr +
出错原因五一回来的一天,vscode的终端突然不能使用了, 并且使用npm -v报下面的错误。查找问题根据错误信息提示,说无法找到,我安装的 npm.ps1这个可执行的文件,我去对应目录下面查找,发现文件时存在的。文件存在,终端打不开,那么定位是环境变量的问题。不管是在用户环境变量还是系统环境变量添加路径,在vscode中就是没有生效。但是使用win + r cmd使用就会生效。所以问题不在环境变量中,正当一筹莫展的时候,百度查看了一下问题,人家说是注册列表的问题。那我就往这个方向查找原创 2021-05-06 09:40:35 · 448 阅读 · 0 评论 -
webpack运行原理
前言在前端工程化日趋复杂的今天,模块打包工具在我们的开发中起到了越来越重要的作用,其中webpack就是最热门的打包工具之一。说到webpack,可能很多小伙伴会觉得既熟悉又陌生,熟悉是因为几乎在每一个项目中我们都会用上它,又因为webpack复杂的配置和五花八门的功能感到陌生。尤其当我们使用诸如umi.js之类的应用框架还帮我们把webpack配置再封装一层的时候,webpack的本质似乎离我们更加遥远和深不可测了。当面试官问你是否了解webpack的时候,或许你可以说出一串耳熟能详的webpack lo转载 2021-04-20 09:00:34 · 1435 阅读 · 0 评论 -
“‘nrm 不是内部或外部命令,也不是可运行的程序,nrm报错 [ERR_INVALID_ARG_TYPE] 解决方法
nprm 不是内部或外部命令,也不是可运行的程序“nprm 不是内部或外部命令,也不是可运行的程序, 看到这个错误,我们一下子就能明白,啥原因不能使用命令呢,那肯定就是环境变量没有配置啦。不管是哪个命令,报这个问题都是环境变量没有配置好。对了,简单介绍下,我出现这个问题的原因是,我的node 按照的是在D盘,我改变了我们的node环境的默认按照方式,在后面的按照过程也会出现许多的毛病,但是只要是自己的好奇心够大,那都是能解决的。解决 nprm 不是内部或外部命令打开环境变量,直接配置即可。如下图原创 2021-03-28 21:29:17 · 4416 阅读 · 3 评论 -
你不知道的 npm cnpm yarn
0. 前言看完本文,你将从整体了解依赖版本锁定原理,package-lock.json 或 yarn.lock 的重要性。首先要从最近接连出现两起有关 npm 安装 package.json 中依赖包,由于依赖包版本更新 bug 造成项目出错问题说起。事件一:新版本依赖包本身 bug项目本地打包正常,但是线上使用 Jenkins 完成 DevOps 交付流水线打包出错问题。报出如下错误:**17:15:32** ERROR in ./node_modules/clipboard/dist/转载 2021-03-28 20:56:11 · 402 阅读 · 0 评论 -
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
说明:这里使用的是webpack: “^5.17.0”,webpack-cli: “^4.2.0”,webpack-dev-server: “^3.11.2”当我配置开发服务器的时候,报错如下:Error: Cannot find module ‘webpack-cli/bin/config-yargs’配置的命令如下:启动报错,内容是:webpack-cli的bin 中少了配置文件,间接的说是webpack 和 webpack - cli 里面少了 webpack-dev-server 的.原创 2021-01-27 09:51:37 · 1145 阅读 · 2 评论 -
webpack思维导图 核心知识点
原创 2020-12-26 09:08:23 · 253 阅读 · 0 评论 -
vite 构建vue3 项目配置文件的详情配置
建立配置文件在根目录下面建立一个vite.config.js文件,在里面导出一个对象或者是一个函数返回一个对象都可以,例如下下面:export default { 配置1:'', 配置2: '',}或者:export default () => { 配置1:'', 配置2: '',}个人常用的配置文件const path = require('path')export default function () { return { // 代理,最重要原创 2020-12-25 10:13:06 · 21904 阅读 · 12 评论 -
vue + elementui + webpack4打包上线 history 和 hash的区别
需要在本地打开在路由文件夹里面 路由模式为 hash 值, 然后 在webpack.config.js 里面的publicPath 配置为 ‘./’关于webpack publicPath 里面的 ‘/’ 和 './'的区别‘/’ 代表的是 绝对路径, 主要是应用于 webpack里面所有loader或者是plugin 需要路径会加上的一个 绝对路径‘./’ 代表的是相对路径, 对于所有的打包的静态资源都是相对于 dist路径的。如果 history 用上面的配置方法在本地点击index.ht原创 2020-07-13 17:25:38 · 587 阅读 · 0 评论 -
webpack的安装和使用
webpack的安装和使用 {ignore}文章目录webpack的安装和使用 {ignore}webpack简介webpack的安装使用webpack官网:https://www.webpackjs.com/目前的最新版本:webpack4webpack简介webpack是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。webpack的特点:为前端工程化而生:webpa原创 2020-06-30 12:41:32 · 243 阅读 · 0 评论 -
webpack打包编译结果的原理分析
/** * 这是webpack打包的编译结果的原理,首先一个立即执行函数,这样使得调用js后立即执行 */(function (modules) { // 使用一个对象来缓存所有的模块,这样使的不会重复导入模块 var storeResult = {}; function __webpack_require(modulePath) { // 如果缓存里面导入过该模块,那么不需要在重新导入模块,返回改模块导出的结果 if (storeResult[原创 2020-06-30 12:39:02 · 611 阅读 · 2 评论 -
webpack与 vite 的不同, vite的速度提升在哪里
vite: https://github.com/vitejs/vite谈谈你对vite的理解,最好对比webpack说明webpack 原理图vite 原理图答案:webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样.原创 2020-11-10 10:19:46 · 7742 阅读 · 3 评论 -
创建项目vue3项目
创建Vue3的项目目前主要有两种方式:1.使用@vue/cli 创建,但是版本在4.5.7左右的可以创建2.使用vite(一个新的构建工具)使用@vue/cli创建1.先更新到@vue/cli 的版本到 4.5.7更新方法: 点击这里创建方式如下:vue create 项目名称 如vue create Vue3-app-cli2.我们选中(按上下键来切换选项)Vue3 或者自定义都可以,测试使用自定义4.自定义一些vue的常用拓展创建成功后,就可以打开了,如下(默认是80的.原创 2020-10-15 10:50:23 · 3975 阅读 · 0 评论 -
vue 脚手架 无法卸载全局的脚手架
今天想通过更新@vue/cli (4.2.2 --> 4.5.7) 来安装一个vue3的项目来练练手,但是遇到一个问题,脚手架一直都无法更新到最新版本,报错信息如下图:排查问题思路如下:npm 的版本问题, 我们使用 npm install -g npm 来更新npm 到最新版本,结果重复卸载@vue/cli 安装@vue/cli 还是不行2.node 的默认安装问题,如果你的node 安装不是采用的默认安装,在电脑里面会有两个全局的node_moudle, 一个是在c盘,另一个是在你安装的原创 2020-10-15 10:14:25 · 5165 阅读 · 10 评论 -
pnpm 的原理
pnpm 原理概念要彻底理解pnpm是怎么做的,需要有一些操作系统知识文件的本质在操作系统中,文件实际上是一个指针,只不过它指向的不是内存地址,而是一个外部存储地址(这里的外部存储可以是硬盘、U盘、甚至是网络)当我们删除文件时,删除的实际上是指针,因此,无论删除多么大的文件,速度都非常快。文件的拷贝如果你复制一个文件,是将该文件指针指向的内容进行复制,然后产生一个新文件指向新的内容硬链接 hard link硬链接的概念来自于 Unix 操作系统,它是指将一个文件A指针原创 2020-06-26 19:43:24 · 1338 阅读 · 2 评论 -
node的其他包
cnpm官网地址:https://npm.taobao.org/为解决国内用户连接npm registry缓慢的问题,淘宝搭建了自己的registry,即淘宝npm镜像源过去,npm没有提供修改registry的功能,因此,淘宝提供了一个CLI工具即cnpm,它支持除了npm publish以外的所有命令,只不过连接的是淘宝镜像源如今,npm已经支持修改registry了,可能cnpm唯一的作用就是和npm共存,即如果要使用官方源,则使用npm,如果使用淘宝源,则使用cnpmnvmnvm并非原创 2020-06-26 19:36:06 · 407 阅读 · 0 评论 -
yarn 学习总结
yarn 简介yarn 官网:https://www.yarnpkg.com/zh-Hans/yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,它仍然使用 npm 的registry,不过提供了全新 CLI 来对包进行管理过去,yarn 的出现极大的抢夺了 npm 的市场,甚至有人戏言,npm 只剩下一个 registry 了。之所以会出现这种情况,是因为在过去,npm 存在下面的问题:依赖目录嵌套层次深:过去,npm 的依原创 2020-06-26 19:33:10 · 875 阅读 · 1 评论 -
全网最全面的npm包管理学习
包管理工具概述本门博客的前置知识:JavaScript、ES6、模块化、git本门博客的所有代码均书写在 nodejs 环境中,不涉及浏览器环境概念模块(module)通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块或主模块库(library,简称lib)以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案包(package)包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等背景CommonJS 的出现,使 nod原创 2020-06-26 19:28:36 · 517 阅读 · 0 评论