이번에는 Angular를 사용하여 컴포넌트를 실행하는 방법을 보여 드리겠습니다. Angular를 사용하여 컴포넌트를 실행할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
모듈 만들기
package.json 파일 초기화
이름 지정 실행
package.json 파일은 다음과 같이 자동으로 생성됩니다. 이름은 폴더 이름이 기본값입니다
1 2 3 4 5 6 7 8 9 10 11 12 | {
"name" : "MZC-Ng-Api" ,
"version" : "1.0.0" ,
"description" : "" ,
"main" : "index.js" ,
"scripts" : {
"test" : "echo \"Error: no test specified\" && exit 1"
},
"keywords" : [],
"author" : "" ,
"license" : "ISC"
}
|
로그인 후 복사
이를 바탕으로 기본 생성 값은 다음과 같습니다. 설정되세요
1 2 3 4 5 | npm config set init-author-name "yiershan" # 你的名称
npm config set init-author-email "511176294@qq.com" # 你的邮箱
npm config set init-author-url "https://www.jianshu.com/u/8afb7e623b70" # 你的个人网页
npm config set init-license "MIT" # 开源授权协议名
npm config set init-version "0.0.1" # 版本号
|
로그인 후 복사
삭제하고 다시 해보세요
1 2 3 4 5 6 7 8 9 10 11 12 | {
"name" : "MZC-Ng-Api" ,
"version" : "0.0.1" ,
"description" : "" ,
"main" : "index.js" ,
"scripts" : {
"test" : "echo \"Error: no test specified\" && exit 1"
},
"keywords" : [],
"author" : "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)" ,
"license" : "MIT"
}
|
로그인 후 복사
그런 다음 README.md 파일을 추가해주세요
프로젝트에 대해 간단히 소개해주세요
1 2 3 4 | # MZC-Ng-Api
这是一个npm包发布测试项目
## License
请查看 [MIT license](./LICENSE).
|
로그인 후 복사
오픈소스 프로토콜 파일 추가
아직도 코와 눈이 있어야 합니다 일을 할 때.
1 2 3 | MIT License
Copyright (c) 2017 MZC
本项目为测试项目,完全免费。
|
로그인 후 복사
소스 코드 추가
src 디렉터리 생성 및 Index.ts 파일 추가
1 2 3 4 5 6 | export class MzcNgApi{
private name: string;
constructor() {
this.name = "MzcNgApi" ;
}
}
|
로그인 후 복사
Index.ts 파일 생성
1 | export * from './src/index'
|
로그인 후 복사
typescript를 사용하여 컴파일
typescript가 없으면 먼저 설치하세요. 설치되었습니다
tsconfig .json 파일 초기화
매우 완전하고 강력한 파일을 자동으로 생성하며 설명도 포함되어 있습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | {
"compilerOptions" : {
"target" : "es5" ,
"module" : "commonjs" ,
"strict" : true,
"esModuleInterop" : true
}
}
|
로그인 후 복사
Compile
성공적인 컴파일은 js 파일을 생성합니다

Release
아무것도 없어도 아무것도 없습니다. 예.
package.json 파일 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | {
"name" : "mzc-ng-api" ,
"version" : "1.0.2" ,
"description" : "个人博客系统,从后台api取数据的angular封装" ,
"main" : "index.js" ,
"scripts" : {
"test" : "echo \"Error: no test specified\" && exit 1"
},
"repository" : {
"type" : "git" ,
"url" : "git+https://github.com/yiershan/MZC-Ng-Api.git"
},
"keywords" : [],
"author" : "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)" ,
"license" : "MIT" ,
"bugs" : {
"url" : "https://github.com/yiershan/MZC-Ng-Api/issues"
},
"homepage" : "https://github.com/yiershan/MZC-Ng-Api#readme"
}
|
로그인 후 복사
다운로드 소스 수정
1 | npm config set registry https:
|
로그인 후 복사
로그인
계정이 없으면 계정을 등록하세요
Publish
릴리스가 완료되고 즉시 적용됩니다. npm으로 이동하여

을 다운로드하고
을 사용하여 새 프로젝트 설치 패키지
를 생성하면 많은 항목이 게시된 것을 확인할 수 있습니다.

그리고 개발 작업 중에는 스마트 프롬프트가 없습니다.
완벽한 최적화
컴파일 시 헤더 파일 *.d.ts를 생성합니다.
컴파일러 프롬프트 기능 해결
tsconfig.json에 설정

tsconfig.json에 대한 추가 구성을 주의 깊게 연구할 수 있습니다
릴리스 파일 지정
수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | {
"name" : "mzc-ng-api" ,
"version" : "1.0.2" ,
"description" : "个人博客系统,从后台api取数据的angular封装" ,
"main" : "index.js" ,
"types" : "./index.d.ts" ,
"scripts" : {
"test" : "echo \"Error: no test specified\" && exit 1"
},
"files" : [
"index.js" ,
"index.d.ts" ,
"src/*.js" ,
"src/*.d.ts" ,
"src/**/*.js" ,
"src/**/*.d.ts" ,
"README.md" ,
"LICENSE" ,
"package.json"
],
"repository" : {
"type" : "git" ,
"url" : "git+https://github.com/yiershan/MZC-Ng-Api.git"
},
"keywords" : [],
"author" : "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)" ,
"license" : "MIT" ,
"bugs" : {
"url" : "https://github.com/yiershan/MZC-Ng-Api/issues"
},
"homepage" : "https://github.com/yiershan/MZC-Ng-Api#readme"
}
|
로그인 후 복사
업데이트 버전
더 보기 Operations
1 2 3 4 5 6 7 8 9 10 | # 版本号从 1.2.3 变成 1.2.4-0,就是 1.2.4 版本的第一个预发布版本。
npm version prepatch
# 版本号从 1.2.4-0 变成 1.3.0-0,就是 1.3.0 版本的第一个预发布版本。
npm version preminor
# 版本号从 1.2.3 变成 2.0.0-0,就是 2.0.0 版本的第一个预发布版本。
npm version premajor
# 版本号从 2.0.0-0 变成 2.0.0-1,就是使预发布版本号加一。
npm version prerelease
更新
npm publish
|
로그인 후 복사
다운받아서 보시면 훨씬 더 좋을 것 같습니다

일부 스크립트를 캡슐화하세요.
필요에 따라 더 빠른 스크립트를 작성할 수 있습니다.
1 2 3 4 5 6 7 8 | "scripts" : {
"build" : "tsc -p ." ,
"b" : "npm run build" ,
"version" : "npm version prerelease" ,
"v" : "mpm run v" ,
"publish" : "npm run b && npm publish" ,
"p" : "npm run publish"
},
|
로그인 후 복사
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue를 사용하여 div를 숨기는 방법
vue를 사용하여 휴대전화에서 SMS 인증 코드 등록 기능을 보내는 방법
위 내용은 Angular를 사용하여 구성 요소를 시작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!