도구 프로젝트를 직접 생성하고 npm에 업로드하여 사용하는 방법

1단계: npm 공식 웹사이트 에 계정 등록

2단계: 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"
  }
}

3단계: 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    //发布

참고: "이 패키지는 비공개로 표시되었습니다."라는 게시 오류가 보고되면 package.json 구성을 변경하고 비공개 속성 값을 false로 수정하세요.

성공적인 인터페이스는 다음과 같습니다.

4단계: 업로드한 프로젝트가 정상인지 테스트

또한 프로젝트를 찾고 npm에 업로드한 프로젝트를 설치하는 명령을 입력합니다(내 프로젝트는 tt-tool이라고 함).

npm install tt-tool

다음 프롬프트가 표시되면 성공을 의미합니다.

5단계: 다른 프로젝트에 소개하기 위해 도구 프로젝트에 몇 가지 메서드를 던지는 방법

여기서는 두 가지 유형으로 나눕니다.

첫 번째 유형: 프로젝트는 구성 요소 형태가 아닌 일부 순수한 메서드만 버립니다.

1. "npm create vite 데모"를 사용하여 프로젝트를 생성하고 다른 프로젝트를 프레임워크로 선택합니다.

2. 템플릿에 대한 라이브러리를 선택하고 Enter 키를 누른 후 언어를 선택하면 생성이 완료됩니다.

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 게시 명령을 통해 프로젝트를 npm에 게시합니다. 외부 프로젝트는 npm install xxx를 통해 설치되며 main.js에 도입되어야 합니다. 또는 사용 전 구성품..