第一步：npm官網(wǎng)注冊一個自己的賬號

第二步：在cmd窗口創(chuàng)建一個項目（這里我以vue3為例子）

npm create vite 項目名

選擇框架：?

?選擇語言：

在項目中使用命令安裝項目依賴：

npm i

? 運(yùn)行項目：

npm run dev

?運(yùn)行成功界面：

注意：

• version：當(dāng)前發(fā)布的版本號，項目每次改動后需要修改版本后再發(fā)布,? 默認(rèn)要0.0.1開始才能上傳，相同版本是傳不上去的，一定要記得每次更改了代碼都改下版本號。

• name: 包名只能小寫, 不能和npm所有的的包名重復(fù)，我一開始用tool-cli，發(fā)現(xiàn)上傳失敗，名字被占用了就不行了。

package.json代碼如下：

{
  "name": "tt-tool",
  "private": false, // 默認(rèn)是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. 根據(jù)提示輸入你的 username、password、email

如果發(fā)現(xiàn)輸入了以上命令沒有讓你接著輸入賬號密碼，那看一下你的npm配置，修改下：

npm config list    //可查看你當(dāng)前的 npm 配置
 
npm config set registry https://registry.npmjs.org/    //npm 源更換為 npm 官方源

再執(zhí)行npm adduser就好了?

注意：輸入密碼時是不會顯示的，你照常輸就行

?發(fā)布項目：

npm publish    //發(fā)布

注意：如果發(fā)布報錯“This package has been marked as private”，那更改package.json 配置，修改?private?屬性值為 false 就好了。

?成功的界面如下：

?第四步：測試自己上傳的項目是否正常

另外找一個項目輸入命令安裝自己上傳到npm上面的項目（我的叫tt-tool）

npm install tt-tool

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

第五步：如何在工具類項目中拋出一些方法供引入其它項目使用

這里我把它分為兩種：

第一種：項目只拋出一些純方法，而不是組件的形式。

1、"npm create vite demo"創(chuàng)建項目，框架選others?

2、模板選library?，?回車之后選語言就創(chuàng)建成功了

3、項目的代碼結(jié)構(gòu)大致如下：

?vite.config.js代碼：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    //構(gòu)建的庫
    //通過build.lib把代碼打包成一個第3方庫，這個庫可以直接在瀏覽器和node.js環(huán)境中使用
    lib: {
      entry: './lib/main.js', // 入口文件目錄（相對于根目錄來說）
      name: 'TtUtils', // 導(dǎo)出的全局變量名稱
      fileName: 'ttUtils', // 構(gòu)建后的代碼文件名
      minify:true, // 是否對代碼進(jìn)行壓縮
    }
  }
})

將要拋出的方法統(tǒng)一寫在lib文件夾中

?通過build命令構(gòu)建項目生成目標(biāo)文件（截圖中是ttUtils.js），再通過npm publish命令將項目發(fā)布到npm上，外部項目通過npm install xxx的方式安裝，使用前先在main.js或組件中引入。文章來源地址http://www.zghlxwxcb.cn/news/detail-525090.html

到了這里，關(guān)于如何自己創(chuàng)建一個工具項目并上傳到npm上使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！