How to create a tool project yourself and upload it to npm for use

Step 1: Register an account on npm official website

Step 2: Create a project in the cmd window (here I use vue3 as an example)

npm create vite 项目名

Choose a frame:

Choose a language:

Use the command in the project to install project dependencies:

npm i

Run the project:

npm run dev

Run successful interface:

Notice:

version : The currently released version number. After each change of the project, you need to modify the version before releasing it. By default, it can only be uploaded starting from 0.0.1. The same version cannot be uploaded. You must remember to change the version number every time you change the code. .

name: The package name can only be lowercase and cannot be repeated with all npm package names. When I first used tool-cli, I found that the upload failed because the name was occupied.

The package.json code is as follows:

{
  "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"
  }
}

Step 3: Add npm user information

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

If you find that entering the above command does not allow you to enter your account and password, then take a look at your npm configuration and modify it:

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

Just execute npm adduser again

Note: The password will not be displayed when you enter it. Just enter it as usual.

Publish project:

npm publish    //发布

Note: If the publishing error "This package has been marked as private" is reported, then change the package.json configuration and modify the private attribute value to false.

The successful interface is as follows:

Step 4: Test whether the project you uploaded is normal

Also find a project and enter the command to install the project you uploaded to npm (mine is called tt-tool)

npm install tt-tool

Seeing the following prompt means success:

Step 5: How to throw some methods in tool projects for introduction to other projects

Here I divide it into two types:

The first type: the project only throws out some pure methods, not in the form of components.

1. Create a project with "npm create vite demo" and select others as the framework.

2. Select library for the template, press Enter and select the language, and the creation will be successful.

3. The code structure of the project is roughly as follows:

vite.config.js code:

import { defineConfig } from "vite";

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

Write the methods to be thrown in the lib folder

Build the project through the build command to generate the target file (ttUtils.js in the screenshot), and then publish the project to npm through the npm publish command. External projects are installed through npm install xxx and should be introduced in main.js or components before use. .