常用的npm包介绍和坑

原创 已于 2022-04-24 13:12:07 修改 · 410 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm

于 2021-01-19 10:45:35 首次发布
本文介绍了node-sass在不同Node.js版本中遇到的兼容性问题及解决方案，包括如何重新安装特定版本的node-sass以解决问题。同时，还提到了使用babel-plugin-import插件自动转换按需引入的方式。

node-sass：

介绍：Node-sass是一个库，.scss文件本地编译为css，并通过连接中间件自动编译。

1.坑：有时候下载第三方组件库，要重启项目才能正常使用

比如： Module build failed: Error: ENOENT: no such file or directory

方法一：npm rebuild node-sass

方法二：重启项目

2.坑：在高版本的node中node-sass的兼容问题

比如： Module build failed: Error: ENOENT: no such file or directory

原因：不同的node要安装对应的node-sass版本

 

方法一：执行npm uninstall node-sass 卸载当前版本
 npm i node-sass@4.14.1

------------------------------------------------------------------------------

babel-plugin-import

介绍：babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.。

比如： 引入vant组件时，没有css

步骤一：npm install babel-plugin-import --save-dev

步骤二：

步骤三：重启项目

前端npm包发布流程：从准备到上线的完整指南
ztK63LrD的博客
05-11 3060
本文详细介绍了如何在npm平台上发布和管理包的全过程，包括账号注册、镜像切换、包的初始化和发布、版本更新及删除等关键步骤。文章还提供了关于包配置的详细说明，如package.json文件的各项配置及其意义，帮助开发者更好地准备和发布npm包。此外，文章还探讨了npm的一些高级功能，如预发布版本的处理、默认安装版本的设置等，旨在提升开发者的发布效率和包的管理能力。通过这些指导和技巧，开发者可以更顺畅地在npm上发布和维护自己的包。
如何发布自己的npm包？从零到一完整指南
最新发布
小白菜的博客
06-11 1455
npm（Node Package Manager）是JavaScript生态中最常用的包管理工具，全球开发者通过npm共享了超过200万+开源模块。新手发布npm包的完整流程（注册→开发→测试→发布→更新）关键配置文件（package.json）的核心字段解析版本号规则（SemVer）的实际应用常见问题（如权限错误、版本冲突）的解决方案先理解npm包的核心概念（package.json、SemVer）再通过一个“字符串反转工具包”案例，演示从0到1的发布流程。
npm 常用基本包
06-20
npm 常用基本包（grunt、gulp、webpack、jquery、requirejs、angular、react、vue等）。
一些npm包
&&
03-02 255
nrm是npm仓库管理工具 安装：npm install -g nrm 切换仓库 : nrmuse taobao liver server开启目录服务器 安装 npm i -g liver-server 使用在指定目录运行命令：liver-server babel npm install --save-dev babel-cli 创建.babelrc配置...
npm 包
编程菜鸟
01-11 409
Node.js 模块分类 内置模块（由Node.js官方提供，例如：fs、path、http等） 自定义模块（由用户创建的 js 文件） 第三方模块（由第三方提供，使用前需要下载） 使用 require() 方法加载模块。（自定义模块需要文件路径；加载模块时，会执行模块中代码） 模块作用域 自定义模块中定义的 变量、方法等成员，只能在当前模块内被访问。 1.module对象：存储和当前模块有关属性。 2.module.exports对象：将模块内成员共享，供外界使...
npm包的分类
weixin_44371237的博客
02-21 352
发布npm包到GitLab教程
lzhlzhlzh_lzh的博客
08-28 1782
之前在研究如何搭建UI组件库（内部使用），其中重要的一步就是发布npm包到GitLab。中间踩了很多坑，在这里记录一下整个流程方便大家快速上手。不足之处欢迎指出🙏。
ts+vite+element-plus+npm发包的各种坑
melissaomy的博客
01-21 4484
ts+vue3+element-plus各种坑
npm包开发和避坑指南
weixin_47953114的博客
03-19 1151
不过很奇怪的是有些能正常运行有些就会出现这种问题，初步怀疑是 vue-loader 和 node 版本的兼容问题，欢迎大家指正~坑三：版本号必须遵循语义化版本控制（SemVer），并且每次发布新版本时，版本号需递增，不能与已发布的版本相同。排查了很久才发现是项目插件无法识别业务组件中的链式判定，类似（?准备两个基础项目，一个用于测试一个用于开发包，适合自己的框架就好。注意：请一定记好自己的账号、密码以及绑定的邮箱（后续会使用到）在取名前先查询一下，如果是这样的那就说明已经有人注册了，不能用。
npm-github - 根据 npm 包名获取 github 地址-crx插件
04-02
语言:中文 (简体) 根据 npm 包名获取 github 地址开发者经常需要去 npm 官网查询 npm 包的 github 地址，比较繁琐。该插件可以根据 npm 的包名称获取其 github 地址、源码预览地址、issue 地址、npm 地址等，提交开发效率
npm【实用教程】内含 npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等
朝阳39的博客
06-23 8793
npm 包即符合 npm官网 规范的 js 模块，通常会发布到 npm 官网中，供大家下载使用。npm 包的详细信息储存在 npm 包的 package.json 文件中，通常包含以下信息：npm 包的版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。 当代码变更时，版本号按以下原则更新：grunt 为包名 express 为依赖包的名称，npm install 可简写为 npm i将安装包下载到 ./node_modules 中（运行 npm 命令时所在的目录），若没有 node_mod
让我告诉你一些强无敌的 NPM 软件包
程序员成长指北
04-19 326
作者：ask_the_sky 链接：https://juejin.cn/post/6950584088462163982 面对繁忙的日程安排与紧迫的工期限制，选择能够切实提升生产率...
nodejs 之npm包
HQ\(^o^)/的博客
08-08 802
npm -v // 查看npm 版本where node // 查看node的安装目录where npm // 查看npm的安装目录npm root -g // 查看全局包的安装目录npm list -g --depth 0 // 查看全局安装过的包。
（三）npm 包
Luckyzhoufangbing的博客
09-05 321
1. CommonJS 的包规范由【包结构】和【包描述文件】两部分组成 包结构：用于组织包中的各种文件 包描述文件：描述包的相关信息，用于外部了解 （package.json） 2. json 文件是不可以写注释的，比如 package.json 3. npm 命令相关 // 移除包 npm remove 包名称 npm r 包名称 // 安装包并且显示到依赖, 在 package.json中可以看到 // npm i 包名称 在package.json看不到 npm i 包名称 --save
npm与包
bnzjxbsjjdnnxj的博客
04-10 1135
小伙伴们晚上好啊，春天到了，柳絮也多了起来，小时候超级喜欢柳絮，觉得它白白的软软的，还会攒一大把柳絮在手里按成一块儿，还会站在柳絮纷飞的地方，看着柳絮往下落然后当作落下的是雪，想想小时候的自己都搞笑，小时候喜欢玩儿游乐场类似于旋转木马那种转圈的大型玩具，但是比旋转木马转的要快，还上下一颠一颠的，有次在游乐场玩儿这个玩儿太长了，导致头可晕，以至于到了回家的时候，坐在车里依然很晕。所以我深刻怀疑现在依然很晕车的原因就是当时那玩具玩儿多了。 目录 一、日常唠叨 二、npm与包 1.包 1.1什么是包.
如何调试微信小程序中NPM包构建失败的详细原因？
06-09
<think>嗯，用户现在遇到微信小程序NPM构建失败的问题，想了解如何调试具体原因。之前我已经给出了基础解决方案，但用户显然需要更深层的排查方法。从对话历史看，用户可能是在实施我建议的project.config.json配置后仍然失败，或是想掌握系统的调试能力。值得注意的细节是，用户特别提到了"调试详细原因"，说明ta已经具备基础操作能力，现在需要进阶技巧。用户提供的5条引用中，[1]和[2]最相关。[1]指出小程序npm包必须包含dist构建目录，这是许多第三方包构建失败的关键；[2]则提到环境变量配置问题。需要将技术要点转化为可操作的排查步骤。调试的核心应分三层面：环境层（node/npm版本）、配置层（路径设置）、包层（第三方包合规性）。用户可能忽略了npm版本兼容性问题，微信小程序要求npm6+但低于npm7，这个细节在引用中没提及但在实际开发中常见。准备用分级检查表的方式组织回答：先全局依赖检查（node/npm版本），再工程配置验证（miniprogram字段），最后进入日志诊断（构建日志分析）。每个步骤都要给出验证方法，比如通过终端命令node-v和开发者工具调试器结合。考虑到用户可能是Windows开发者（osType字段），需要特别注意Windows路径反斜杠转义问题，这在project.config.json配置中经常引发错误。此外建议ta检查杀毒软件拦截情况，因为微信开发者工具常被误判为病毒。</think> ### 微信小程序NPM包构建失败调试指南 以下为系统化排查步骤，结合关键配置与常见陷阱： #### 一、环境层验证（基础前提） 1. **Node.js与npm版本检测** 在开发者工具调试器终端执行： ```bash node -v # 需 ≥12.0 (推荐14.x~18.x) npm -v # 需6.x~8.x（npm9+可能导致兼容问题） ``` ✔️ 版本异常时需重装Node.js（用nvm工具切换版本更高效）[^2] 2. **npm安装状态确认** ```bash npm ls --depth=0 # 检查依赖是否完整安装 ``` ❌ 若出现`EMPTY`或缺失模块，执行： ```bash npm install --force # 强制重装依赖 ``` #### 二、工程配置验证（核心步骤） 1. **`project.config.json`关键配置** ```json "setting": { "packNpmManually": true, // 必须为true "packNpmRelationList": [{ "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram" // 需匹配项目结构 }], "ignoreDev": true // 忽略devDependencies（推荐） } ``` 🔍 路径校验规则： - `miniprogramNpmDistDir`需指向**小程序代码目录**（非node_modules） - 若项目无miniprogram文件夹，改为`"./"`[^3] 2. **npm包规范检查** 第三方包需在`package.json`声明构建入口： ```json { "miniprogram": "dist", // 指定构建目录 "files": ["dist/**/*"] // 明确发布文件 } ``` ❗ **关键点**：微信小程序npm包**必须提供dist输出目录**（非源码目录）[^1] #### 三、构建过程诊断（日志分析） 1. **查看构建日志** 开发者工具 → 工具栏 → 详情 → 本地设置 → 勾选“调试器打印`npm`命令” 🚦 典型错误日志： ```log [Error] 找不到package.json（路径错误） [Warning] 跳过构建：package.json未声明miniprogram字段（第三方包不规范） ``` 2. **手动模拟构建（终端验证）** ```bash cd miniprogram_npm # 进入构建目录 npm rebuild --update-binary # 强制二进制重编译 ``` #### 四、第三方包专项排查 1. **组件包兼容性验证** 使用`@vant/weapp`等组件库时： ```json // package.json "dependencies": { "@vant/weapp": "^1.0.0" // 检查版本是否支持小程序 } ``` 🔧 解决方案： ```bash npm install @vant/weapp@latest --production ``` 2. **C++模块处理** `sqlite3`等含C++模块的包需额外配置： ```json "scripts": { "install": "node-pre-gyp install --fallback-to-build" }, "devDependencies": { "node-gyp": "^9.0.0" } ``` #### 五、终极解决路径 ```mermaid graph TD A[构建失败] --> B{检查控制台日志} B -->|路径错误| C[修正miniprogramNpmDistDir] B -->|包不规范| D[检查miniprogram字段] D --> E[联系库作者或改用替代包] B -->|环境问题| F[重装Node/npm] F --> G[删除node_modules后重装] ``` 执行后仍失败时尝试： 1. 删除{project}/miniprogram_npm目录 2. 关闭开发者工具 3. 删除项目根目录下的`package-lock.json` 4. 重启工具后重新构建 > ⚠️ **避坑提示**：微信开发者工具≥1.05版本已禁用npm9+，建议锁定npm版本： > ```bash > npm install -g npm@8.19.4 # 安装稳定版本 > ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值