npm发布自己的公网包步骤详解

news/2024/11/23 12:49:26/

初始化项目

  1. 比如我,创建了code-transfor-text_vue项目
    在这里插入图片描述

在这里插入图片描述

  1. 根目录初始化git
git init .

在这里插入图片描述

  1. 建立开源协议
    给项目根目录手动创建LICENSE文件文件,没有后缀名
MIT LicenseCopyright (c) 2023 quanyiPermission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

注意吧你的Copyright (c) 2023 quanyi改成你的时间和名字
在这里插入图片描述

  1. 项目基本搭建完毕,开始你的功能开发吧
    在这里插入图片描述

  2. 功能开发中,建立实时本地软链接进行测试

npm link

会在全局包生成个临时的软链接
在这里插入图片描述

有了软链接后,在你测试的项目里与软链接达成连接

npm link 包名

在这里插入图片描述

然后就是在你测试的项目里import

import CodeTransforText from "code-transfor-text_vue"Vue.use(CodeTransforText)

使用试试看

  1. 测试完毕没问题记得解除你测试项目里的软链接连接
npm unlink 包名

在这里插入图片描述

同时存在全局包的软链接记得删除:

在这里插入图片描述

一切准备就绪,可以发布了

  1. 如果包比较大想要打包一下,使用该步骤
    项目根目录创建webpack.config.js文件,写入:
const path = require('path');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js',library: 'CodeTransforText', // 全局挂载包的引用名libraryTarget: 'umd', //通用模式:支持用户通过es、common.js、AMD的方式引入npm包globalObject: 'this' // 为 webpack 4 新增属性,需要指定 global 的值为 ’this‘,否则会为默认值 ’self‘,无法在 nodejs 环境中使用。}
}

package.json文件配置scripts:

"scripts": {"build": "webpack"},

在这里插入图片描述

那么此时给项目执行打包

npm run build

可以得出dist/index.js:
在这里插入图片描述

发布到npm

如果没有npm账号就先注册npm账号

  1. 有的话就登录
npm login https://www.npmjs.com

在这里插入图片描述

  1. 发布
npm publish

在这里插入图片描述

网络稍有延迟,稍到npm你的账户上看看
在这里插入图片描述

使用

那么现在就可以下载了

npm install code-transfor-text_vue

在这里插入图片描述


http://www.ppmy.cn/news/585352.html

相关文章

mysql5.6 linux 安装设置密码和远程登录

mysql 设置跳过登陆验证: vim /etc/my.cnf文件; 在[mysqld]后添加skip-grant-tables(登录时跳过权限检查) [mysqld]skip-grant-tables port 3306 socket /tmp/mysql.sock datadir /www/server/data default_storage_engin…

力扣-线段树

力扣-线段树 307. 区域和检索 - 数组可修改 我的题解: 思路: 直接套用线段树模版,第一个用的是数组模拟树,第二个用节点来实现 public class NumArray {//数组的长度private int n;//输入的数组private int[] arr;//存储元素值private int[] …

项目管理“铁三角”

项目管理“铁三角” 项目的范围管理、时间管理、成本管理构成了决定项目成败(一般以项目的质量作为评估依据)的“铁三角”。范围扩大,要通过增加项目的时间与成本保证项目的质量,或者通过降低质量要求以符合时间或者成本的要求&a…

linux铁三角视频,linux常用命令cdlsPATH

一、cd 命令 cd--change directory即变换目录。 cd 绝对路径或相对路径 cd ~用户 表示到这个用户的家目录,即/home/用户 cd ~表示回到自己的家目录,即/root这个目录 cd 表示回到自己的家目录 cd .. 表示回到上次目录 二、ls命令 ls--list即列出当前目录下…

【NLP入门教程】十五、FastText保姆教程

当谈到处理文本数据时,快速和高效的文本分类是一项重要任务。Facebook AI研究院开发了一种名为FastText的简单而强大的文本分类工具。FastText以其快速的训练速度和良好的性能而闻名,特别适用于处理大规模文本数据集。本节将介绍FastText的原理、用法以及示例代码。 1. Fast…

不了解管理铁三角,想质量管理很难

圣诞节到了,一个贫穷母亲只能给她两个儿子一块小小的面饼作为圣诞晚餐。可是两个不懂事的儿子却给他们的妈妈出了个难题,无论她打算怎么分,总有一个儿子说妈妈偏心,把自己这边分得小了。 万般无奈之下,这位妈妈只好想了…

AI生成--vue面试题(1)

Vue是什么?和其他框架有什么区别? 答:Vue.js是一个流行的JavaScript框架,用于构建用户界面,它和Angular、React这些框架相比具有更小、更快、更容易上手等特点。Vue基于响应式编程的概念,可以轻松地处理动…

2023最强免费的AI生成图像工具其1

Midjourney虽然很强,但是要钱.Stable Diffusion也很强,但是对于小白来说部署起来也是很麻烦。我们整理了一些已经上线了的,可以直接访问和使用的AI生成图像的工具网站集合。 收录到 2023 最强免费AI生成图像工具集合系列https://www.webhub1…