如何自己创建一个工具项目并上传到npm上使用

第一步:npm官网注册一个自己的账号

第二步:在cmd窗口创建一个项目(这里我以vue3为例子)

npm create vite 项目名

选择框架: 

 选择语言:

在项目中使用命令安装项目依赖:

npm i

  运行项目:

npm run dev

 运行成功界面:

注意:

  • version:当前发布的版本号,项目每次改动后需要修改版本后再发布,  默认要0.0.1开始才能上传,相同版本是传不上去的,一定要记得每次更改了代码都改下版本号。

  • name: 包名只能小写, 不能和npm所有的的包名重复,我一开始用tool-cli,发现上传失败,名字被占用了就不行了。

package.json代码如下:

{
  "name": "tt-tool",
  "private": false, // 默认是true,要改成false,不然后期没法成功上传
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.9"
  }
}

 第三步:添加npm用户信息

npm adduser    //1. 根据提示输入你的 username、password、email

如果发现输入了以上命令没有让你接着输入账号密码,那看一下你的npm配置,修改下:

npm config list    //可查看你当前的 npm 配置
 
npm config set registry https://registry.npmjs.org/    //npm 源更换为 npm 官方源

再执行npm adduser就好了 

注意:输入密码时是不会显示的,你照常输就行

 发布项目:

npm publish    //发布

注意:如果发布报错“This package has been marked as private”,那更改package.json 配置,修改 private 属性值为 false 就好了。

 成功的界面如下:

 第四步:测试自己上传的项目是否正常

另外找一个项目输入命令安装自己上传到npm上面的项目(我的叫tt-tool)

npm install tt-tool

看到以下提示就代表成功了:

第五步:如何在工具类项目中抛出一些方法供引入其它项目使用

这里我把它分为两种:

第一种:项目只抛出一些纯方法,而不是组件的形式。

1、"npm create vite demo"创建项目,框架选others 

2、模板选library , 回车之后选语言就创建成功了

3、项目的代码结构大致如下:

 vite.config.js代码:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    //构建的库
    //通过build.lib把代码打包成一个第3方库,这个库可以直接在浏览器和node.js环境中使用
    lib: {
      entry: './lib/main.js', // 入口文件目录(相对于根目录来说)
      name: 'TtUtils', // 导出的全局变量名称
      fileName: 'ttUtils', // 构建后的代码文件名
      minify:true, // 是否对代码进行压缩
    }
  }
})

将要抛出的方法统一写在lib文件夹中

 通过build命令构建项目生成目标文件(截图中是ttUtils.js),再通过npm publish命令将项目发布到npm上,外部项目通过npm install xxx的方式安装,使用前先在main.js或组件中引入。

猜你喜欢

转载自blog.csdn.net/tt18473481961/article/details/131417621
今日推荐