百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

教你写第一个NPM包惊艳其他人

liuian 2025-02-07 18:21 17 浏览

自己书写一个npm包并发布到npm上面

说到npm包都会给人一种特别高大上的感觉，并且自己写了一个包之后如果有人用那么就会产生莫大的成就感，程序员的快乐就是这么简单。

想必有产生写npm包想法的人都对模块化比较熟悉，并且对于react、vue两者之一都比较熟练了。

下面呢我们就是使用react来写一个自己的npm包，我们呢会使用自己封装的webpack脚手架来写，如果有兴趣同学可以来看一下我的自我沉淀webpack5+react+eslint+tslint[1]文章。接下来的内容呢也是基于此来说明的。

这里也有现成的脚手架[2]

一、不同点

npm包的目录结构和普通的脚手架结构有所不同

  1. 启动目录不同：以往我们习惯将entry文件写在src中，但是npm包的入口文件不能写在src中，因为npm是将我们的源代码打包，不可以包括html。所以将index.jsx和index.html文件提取到example文件中。【注意】example文件要和src同级。结构和内容如下index.jsx
?import?React?from?'react';
?import?{?render?}?from?'react-dom';
?import?ReactDemo?from?'../src';

?const?App?=?()?=>?;
?render(,?document.getElementById('root'));
?
????复制代码
index.html
?
?
???
?????
?????
?????
?????Document
???
???
?????
??? ? ????复制代码
然后在src/index.jsx文件中 导出
?import?App1?from?'./App';
?export?default?App1;
????复制代码
## 二 配置npm包的打包运行文件

在 config文件夹中新建webpack.npm.js文件

配置文件内容差不多。如下：详细配置请移步 [自我沉淀webpack5+react+eslint+tslint](https://juejin.cn/post/7002157698108096543 "https://juejin.cn/post/7002157698108096543")

externals划重点：这个可以告诉npm打包的时候不许将下面几种东西打包进去哦。
?const?{?resolve?}?=?require('path');
?const?cssLoaders?=?[
???'style-loader',
???{
?????loader:?'css-loader',
?????options:?{
???????importLoaders:?1,
???????modules:?{
?????????auto:?(resourcePath)?=>?resourcePath.endsWith('.less'),
?????????localIdentName:?'[local]_[hash:base64:10]',
???????},
?????},
???},
???{
?????loader:?'postcss-loader',
?????options:?{
???????postcssOptions:?{
?????????plugins:?[['autoprefixer'],?require('postcss-preset-env')()],
???????},
?????},
???},
?];
?module.exports?=?{
???entry:?'./src/index.tsx',
???mode:?process.env.NODE_ENV,
???externals:?{
?????antd:?'antd',
?????react:?'React',
???},
???output:?{
?????libraryTarget:?'umd',
?????filename:?'index.js',
?????path:?resolve(resolve(__dirname,?'..'),?'dist'),
?????clean:?true,
???},
???resolve:?{
?????alias:?{
???????'@':?resolve(resolve(__dirname,?'..'),?'src/'),
?????},
?????extensions:?['.ts',?'.tsx',?'.js',?'.jsx',?'.json'],
?????mainFiles:?['index'],
???},

???devServer:?{
?????hot:?true,
?????port:?3002,
?????host:?'127.0.0.1',
?????compress:?true,
?????open:?true,
?????proxy:?{
???????'/api':?{
?????????target:?'http://127.0.0.1:3002',
?????????pathRewrite:?{?'^/api':?''?},
?????????secure:?false,
???????},
?????},
???},

???module:?{
?????rules:?[
???????{
?????????test:?/\.(js|jsx)$/,
?????????include:?resolve(resolve(__dirname,?'..'),?''),
?????????exclude:?/node_modules/,
?????????enforce:?'pre',
?????????use:?[
???????????{
?????????????loader:?'babel-loader',
?????????????options:?{
???????????????presets:?['@babel/preset-env',?'@babel/preset-react'],
???????????????//?缓存：第二次构建时，会读取之前的缓存
???????????????cacheDirectory:?true,
?????????????},
???????????},
?????????],
???????},
???????{
?????????test:?/\.tsx$/,
?????????loader:?'ts-loader',
?????????exclude:?/node_modules/,
???????},
???????{
?????????test:?/\.css$/,
?????????use:?[...cssLoaders],
???????},
???????{
?????????test:?/\.less$/,
?????????use:?[...cssLoaders,?'less-loader'],
???????},
???????{
?????????test:?/\.s[ac]ss$/,
?????????use:?[...cssLoaders,?'sass-loader'],
???????},
???????{
?????????exclude:?/.(html|less|css|sass|js|jsx|ts|tsx)$/,
?????????test:?/\.(jpg|jpe|png|gif)$/,
?????????loader:?'file-loader',
?????????options:?{
???????????name:?'imgs/[name].[ext]',
???????????outputPath:?'other',
?????????},
???????},
???????{
?????????test:?/\.(ect|ttf|svg|woff)$/,
?????????use:?{
???????????loader:?'file-loader',
???????????options:?{
?????????????name:?'icon/[name].[ext]',
???????????},
?????????},
???????},
?????],
???},
?};
?
?
?
????复制代码

下面着重说一下package.json中的内容

  • name: 包名，后续在npm中搜索全靠它
  • version：版本号，每发布一次npm包就要增加一个版本，每个版本不能重复。
  • description：描述
  • main: 本包向外暴露的文件，很重要，一定要和你打包出来的文件名一模一样，我的叫做"dist/index.js"
  • private: true/false 是否为私有。一般为false否则只有自己能使用
  • flies: 暴露的文件夹, 有哪些文件夹提交到npm上面 格式为[ "dist" ]
  • keywords: npm检索的关键字
  • author: 作者
  • license: ISC
  • peerDependencies: 代表着当前npm包依赖下面这几种环境。
  • 完整配置
???{
????"name":?"new_webpack_action2",
????"version":?"1.0.24",
????"m":?"",
????"main":?"dist/index.js",
????"private":?false,
????"flies":?[
??????"dist"
????],
????"scripts":?{
??????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
??????"dev":?"export?NODE_ENV=development?&&?npx?webpack?serve?--config?config/webpack.dev.js",
??????"build":?"export?NODE_ENV=production?&&?npx?webpack???--config?config/webpack.prod.js",
??????"npm":?"export?NODE_ENV=production?&&?npx?webpack???--config?config/webpack.npm.js"
????},
????"keywords":?[
??????"react",
??????"javascript",
??????"npm"
????],
????"author":?"919022572@qq.com",
????"license":?"ISC",
????"devDependencies":?{
??????"@ant-design/icons":?"4.7.0",
??????"@babel/core":?"^7.15.0",
??????"@babel/preset-env":?"^7.15.0",
??????"@babel/preset-react":?"^7.14.5",
??????"@types/lodash":?"^4.14.178",
??????"@types/react":?"^17.0.19",
??????"@types/react-dom":?"^17.0.11",
??????"@types/react-router-dom":?"^5.3.3",
??????"@typescript-eslint/eslint-plugin":?"^5.11.0",
??????"@typescript-eslint/parser":?"^5.11.0",
??????"autoprefixer":?"^10.3.2",
??????"babel-loader":?"^8.2.2",
??????"babel-plugin-import":?"^1.13.3",
??????"css-loader":?"^6.2.0",
??????"css-minimizer-webpack-plugin":?"^3.0.2",
??????"eslint":?"^8.8.0",
??????"eslint-config-airbnb":?"^19.0.4",
??????"eslint-plugin-import":?"^2.25.4",
??????"eslint-plugin-jsx-a11y":?"^6.5.1",
??????"eslint-plugin-react":?"^7.28.0",
??????"eslint-plugin-react-hooks":?"^4.3.0",
??????"eslint-webpack-plugin":?"^3.1.1",
??????"file-loader":?"^6.2.0",
??????"html-webpack-externals-plugin":?"^3.8.0",
??????"html-webpack-plugin":?"^5.5.0",
??????"less":?"^4.1.1",
??????"less-loader":?"^10.0.1",
??????"lodash":?"^4.17.21",
??????"mini-css-extract-plugin":?"^2.2.0",
??????"postcss-loader":?"^6.1.1",
??????"postcss-preset-env":?"^7.4.2",
??????"sass":?"^1.38.0",
??????"sass-loader":?"^12.1.0",
??????"speed-measure-webpack-plugin":?"^1.5.0",
??????"style-loader":?"^3.2.1",
??????"stylelint":?"^13.13.1",
??????"stylelint-config-standard":?"^22.0.0",
??????"terser-webpack-plugin":?"^5.1.4",
??????"thread-loader":?"^3.0.4",
??????"ts-loader":?"^9.2.5",
??????"tslint":?"^6.1.3",
??????"typescript":?"^4.5.5",
??????"webpack":?"^5.68.0",
??????"webpack-cli":?"^4.8.0",
??????"webpack-dev-server":?"^4.0.0",
??????"webpack-merge":?"^5.8.0",
??????"workbox-webpack-plugin":?"^6.4.2"
????},
????"dependencies":?{
??????"antd":?"4.18.8",
??????"axios":?"^0.26.0",
??????"react":?"17.0.2",
??????"react-dom":?"17.0.2",
??????"react-router-dom":?"5.2.0"
????},
????"peerDependencies":?{
??????"@ant-design/icons":?"4.7.0",
??????"antd":?"4.18.8",
??????"bizcharts":?"4.1.15",
??????"rc-footer":?"0.6.6",
??????"react":?"17.0.2",
??????"react-dom":?"17.0.2",
??????"react-router-dom":?"5.2.0"
????},
????"browserslist":?{
??????"development":?[
????????"last?1?chrome?version",
????????"last?1?firefox?version",
????????"last?1?safari?version"
??????],
??????"production":?[
????????">0.2%",
????????"not?dead",
????????"not?op_mini?all"
??????]
????}
??}
??
??
??复制代码

三、发布

如果是第一次发布包，执行以下命令，然后输入前面注册好的NPM账号，密码和邮箱，将提示创建成功

??npm?adduser
??
??复制代码

如果不是第一次发布包，执行以下命令进行登录，同样输入NPM账号，密码和邮箱

??npm?login
??
??复制代码

注意：npm adduser成功的时候默认你已经登陆了，所以不需要再进行npm login了

接着先进入项目文件夹下，然后输入以下命令进行发布

??npm?publish
??
??复制代码

当终端显示如下面的信息时，就代表版本号为1.0.0(你的package.json中的版本号)的包发布成功啦！前往NPM官网就可以查到你的包

?+?你的文件名@0.1.0
?
??复制代码

四、报错

1、如果出现

??npm?ERR!?code?E403
??npm?ERR!?403?403?Forbidden?-?PUT?https://registry.npmjs.org/ghost-watermarkdemo?-?Forbidden
??npm?ERR!?403?In?most?cases,?you?or?one?of?your?dependencies?are?requesting
??npm?ERR!?403?a?package?version?that?is?forbidden?by?your?security?policy,?or
??npm?ERR!?403?on?a?server?you?do?not?have?access?to.
??复制代码

以下几种原因会导致

??账号密码错误???(请检查npm官网的账号密码)
??包重名?????(请检查npm官网上是否有同名项目，名字取决于?package.js?的项目名字段)
??网络原因???
??镜像源问题?
??新注册的用户邮箱未激活。??登陆你的邮箱去激活(如下)

???
??复制代码

image.png

2、 如果出现

image.png

需要在你的package.json中 private改为false或者删除

更新已经发布的包

更新包的操作和发布包的操作是一样的

???npm?publish
???
复制代码

但是每次更新时，必须修改版本号后才能更新，比如将1.0.0修改为1.0.1后才能更新发布。

这里的包版本管理规则都是一样的，采用的是semver（语义化版本），意思就是版本号：大改.中改.小改

五、## 从npm上面卸载自己发布的包

进入自己项目的目录执行。npm unpublish --force 出现：

???npm?WARN?using?--force?Recommended?protections?disabled.
-包名@0.1.0
复制代码

则卸载成功，这时在npm上面就搜索不到了

关于本文

来自：夏末海棠

https://juejin.cn/post/7072652104837365774



相关推荐

基于STM32的四旋翼飞行器控制系统设计

摘要：四旋翼飞行器控制系统的性能决定了飞行效果的优劣，如何改善飞行控制系统使其拥有更良好的表现成为近几年的研究热点。根据四旋翼飞行器的飞行原理，设计了一种新型四旋翼飞行器控制系统。该系统以STM32...

单片机差分升级(STM32,M0,M3,M4适用)

参考文档：https://blog.csdn.net/darling757267/article/details/80652267https://www.cnblogs.com/idreamo/p/9...

STM32入门: Step3 UART简介（stm32的uart和usart）

Step3UART简介UART和新板介绍34分钟目标描述完成本教程后，您将：熟悉L475IoTNodeDiscovery板，了解如何在以下位置对RS232串行链路进行编程和使用：以前使...

如何使用GCC手动编译stm32程序（如何在gcc上编译并运行代码）

如何不使用任何IDE（集成开发环境）编译stm32程序?集成开发环境将编辑器、编译器、链接器、调试器等开发工具集成在一个统一的软件中，使得开发人员可以更加简单、高效地完成软件开发过程。如果我们不使用K...

STM32单片机从零开始使用教程(二) 使用Cube搭建跑马灯工程并下载

通过cube建立工程RCC设置为外部晶振高速晶振对应的引脚会亮起进入clockconfiguration进行时钟配置，输入频率8M盒子PLLSourceMu改为使用外部时钟HSE，系统时钟Sys...

超详细的FreeRTOS移植全教程——基于stm32

准备在移植之前，我们首先要获取到FreeRTOS的官方的源码包。这里我们提供两个下载链接:一个是官网：http://www.freertos.org/另外一个是代码托管网站：https://sourc...

用ESP32和STM32设计了一块主控板，却用来养鱼?

前言我做了一个智能鱼缸系统的控制板。基于ESP32和STM32设计。成本不到200元。全文导航功能描述、电路设计图、主要模块选型、软件说明、获取开源资料、结语。功能描述①自动投食。②自动过滤供氧。③灯...

STM32物联网套件基础版03-控制继电器

前言继电器是一个生活中比较常用的元器件，有了继电器，我们可以使用单片机输出的低电平控制高电平期间工作，比如继电器接到220V用电器上，可通过单片机智能控制用电器，本节我们开始正式学习如何使用继电器。一...

STM32单片机详细教学(三):STM32单片机的开发方法

大家好，今天给大家介绍STM32单片机的开发方法，文章末尾附有本毕业设计的论文和源码的获取方式，可进群免费领取。前言经过前两章节对STM32的简单介绍，在接下来的几个章节中开始进行STM32单片机的软...

原来STM32单片机的开发如此的简单

大家好，我是华维今天我们讲下用STM32CubeMX和Keil5点亮一个LED，这个项目比较简单，大家都可以尝试下。这个就是我们今天的主角，这款单片机芯片是STM32F030K6T6。这个开发板非常简...

STM32 F103 使用HAL库配置PVD（stm32l0 hal库）

PVD(ProgrammableVotageDetector)，即可编程电压监测器PVD可以检测电压变化并触发中断，一般用于判断断电并进行数据保存工程是使用STM32CubeMx生成的，在ST...

STM32F4芯片嵌入式学习7（stm32f4芯片包安装）

文档是本人学习总结的文档，有些乱，勿怪。1、STM32F407时钟系统在STM32F4中，有5个最重要的时钟源，为HSI、HSE、LSI、LSE、PLL。其中PLL实际是分为两个时钟源，...

ARM和STM32，嵌入式是什么关系（arm嵌入式和单片机的区别）

ARM，STM和嵌入式的关系就是上图，其中ARM负责内核架构，指令集的设计，提供给IC设计厂商内核和编译器等支持(如ARM11,Cortex-M,Cortex-A系列处理器)STM32是基于ARM...

STM32CUBEMX 使用教程2 — GPIO的使用、输入/输出

学习和使用任何一款MCU，最初开始往往都是从GPIO入手的，学会如何配置IO，能让IO输出想要的电平状态，能读取IO口的电平。本篇介绍一下STM32的GPIO。GPIO（General-Purpose...

入手STM32单片机的知识点总结（stm32单片机的介绍）

文章下方附学习资源，自助领取本文将以STM32F10x为例，对标准库开发进行概览。主要分为三块内容：STM32系统结构寄存器通过点灯案例，详解如何基于标准库构建STM32工程STM32系统结构上图，S...

一周热门
最近发表
标签列表