VUE3.0을 빠르게 시작하는 방법: 학습하기
1.1 모듈화란 무엇입니까?
모듈화는 복잡한 문제를 해결할 때 시스템을 위에서 아래로 계층별로 여러 모듈로 나누는 프로세스를 의미합니다. 전체 시스템에서 모듈은 결합, 분해, 교체가 가능한 단위이다.
프로그래밍 분야의 모듈화는 고정된 규칙을 따르고 큰 파일을 독립적이고 상호 의존적인 여러 개의 작은 모듈로 분할하는 것입니다.
코드를 모듈로 분할하면 다음과 같은 이점이 있습니다.
코드의 재사용성이 향상되고,
코드 유지 관리가 향상되며,
온디맨드 로드가 가능합니다.
2.1 Node.js의 모듈 분류
기준 모듈의 소스에 따라 모듈은 3가지 주요 범주, 즉
내장 모듈(fs, path, http 등과 같은 내장 모듈은 Node.js에서 공식적으로 제공됨),
사용자 정의 모듈(각 . (사용자가 만든 js 파일) , 모두 사용자 정의 모듈입니다.)
타사 모듈(타사에서 개발한 모듈은 공식적으로 제공되는 내장 모듈도 아니고 사용자가 만든 사용자 정의 모듈도 아니므로 사용하기 전에 다운로드해야 함)
2.2
강력한 require() 메소드를 사용하여모듈을 로드하면
필요한 내장 모듈, 사용자 정의 모듈 및 타사 모듈을 로드하여 사용할 수 있습니다. 예를 들어:
참고: require() 메서드를 사용하여 다른 모듈을 로드하는 경우 로드된 모듈의 코드가 실행됩니다. 사용자 정의 모듈을 로드할 때 파일 접미사 '.js'를 생략할 수 있습니다.
2.3 Node.js의 모듈 범위
모듈 범위란 무엇입니까
? 함수 범위와 유사하게 사용자 정의 모듈에 정의된 변수, 메소드 및 기타 멤버는 현재 모듈 내에서만 액세스할 수 있습니다. 이를 모듈 범위라고 합니다.
모듈 범위의 이점은
전역 변수 오염 문제를 방지합니다. (두 개의 js 파일을 스크립트 태그와 함께 가져오고 동일한 변수가 두 파일 모두에 정의된 경우 전자는 후자에 의해 덮어쓰여집니다.)
2.4 외부에서 모듈 범위 공유 멤버
1 .객체
각 .js 사용자 정의 모듈에는 현재 모듈과 관련된 정보를 저장하는 모듈 객체가 있습니다.
2. module.exports 객체
사용자 정의 모듈에서는 module.exports 객체를 사용하여 외부 사용을 위해 모듈 내 멤버를 공유할 수 있습니다.
외부 세계에서 사용자 정의 모듈을 가져오기 위해 require() 메소드를 사용할 때, 모듈이 얻는 것은 module.exports가 가리키는 객체입니다.
3. 멤버 공유 시 주의 사항:
require() 메서드를 사용하여 모듈을 가져올 때 가져오기 결과는 항상 module.exports가 가리키는 개체를 기반으로 합니다.
4. 내보내기 객체
module.exports 단어는 작성하기가 상대적으로 복잡하기 때문에 외부에서 멤버를 공유하는 코드를 단순화하기 위해 Node에서는 내보내기 객체를 제공합니다. 기본적으로 내보내기와 module.exports는 동일한 개체를 가리킵니다. 최종 공유 결과는 여전히 module.exports가 가리키는 객체를 기반으로 합니다.
5. 내보내기 및 module.exports 사용에 대한 오해
모듈을 require()할 때 항상 module.exports가 가리키는 객체를 얻게 된다는 점을 항상 기억하십시오.
참고:개인적인 이해: 내보내기와 module.exports는 원래 동일한 개체를 가리킵니다. 데이터를 마운트하는 것만으로도 여전히 동일한 개체를 가리킵니다. 내보내기를 통해 마운트된 데이터는 require 모듈에서도 얻을 수 있습니다. 한 당사자가 값을 할당하는 경우(다른 개체를 가리키면 동일한 개체를 가리키지 않고 require 모듈은 module.exports가 가리키는 개체를 가져옵니다. 따라서 한 당사자가 포인터를 변경하면 require 모듈은 가져오지 않습니다.
혼동
을 방지하려면 동일한 모듈에서 내보내기와 module.exports를 동시에 사용하지 않는 것이 좋습니다.
2.5 Node.js의 모듈성 사양 Node.js는 CommonJS 모듈성을 따릅니다. CommonJS는 모듈의 특성과 각 모듈이 서로 상호 작용하는 방식을 규정합니다.
CommonJS는 다음을 규정합니다.
(1) 각 모듈 내에서 모듈 변수는 현재 모듈을 나타냅니다.
(2) 모듈 변수는 객체이고 해당 내보내기 속성(예: module.exports)은 외부 인터페이스입니다.
(3) 모듈을 로드하면 실제로 모듈의 module.exports 속성이 로드됩니다. require() 메소드는 모듈을 로드하는 데 사용됩니다.
3.1 패키지
1. 패키지란 무엇입니까?
Node.js의 타사 모듈을 패키지라고도 합니다.
컴퓨터와 컴퓨터가 동일한 것을 지칭하는 것처럼 타사 모듈과 패키지는 동일한 개념을 지칭하지만 이름은 다릅니다.
2. 패키지의 소스는
Node.js의 내장 모듈 및 사용자 정의 모듈과 다릅니다. 패키지는 타사 개인 또는 팀에 의해 개발되었으며 누구나 무료로 사용할 수 있습니다.
참고: Node.js의 패키지는 모두 무료 오픈 소스이며 비용을 지불하지 않고도 무료로 다운로드하여 사용할 수 있습니다.
3. 패키지가 필요한 이유
Node.js의 내장 모듈은 일부 하위 API만 제공하기 때문에 내장 모듈을 기반으로 한 프로젝트 개발의 효율성은 매우 낮습니다.
패키지는 내장된 모듈을 기반으로 캡슐화되어 더욱 발전되고 편리한 API를 제공하여 개발 효율성을 크게 향상시킵니다.
패키지와 내장 모듈 간의 관계는 jQuery와 내장 브라우저 API 간의 관계와 유사합니다.
4. 패키지 다운로드는 어디서 하나요?
해외에 npm, Inc.라는 IT 회사가 있습니다. 이 회사는 매우 유명한 웹사이트인 www.npmjs.com/을 가지고 있는데, 이는 세계 최대의 패키지 공유 플랫폼입니다. 여기에서 다운로드할 수 있습니다. 인내심이 충분하다면 웹사이트에서 필요한 패키지를 검색해 보세요!
지금까지 전 세계 1,100만 명 이상의 개발자가 이 패키지 공유 플랫폼을 통해 우리가 사용할 수 있는 120만 개 이상의 패키지를 개발하고 공유했습니다. npm, Inc.는 모든 패키지를 외부와 공유할 수 있도록 Registry.npmjs.org/에 서버를 제공합니다. 이 서버에서 필요한 패키지를 다운로드할 수 있습니다.
참고:
www.npmjs.com/ 홈페이지에서 필요한 패키지를 검색하시고
, Registry.npmjs.org/ 서버에서 필요한 패키지를 다운로드 받으세요
. 5. 패키지 다운로드 방법
npm, Inc. 회사에서 패키지 관리 도구를 제공합니다. , 이 패키지 관리 도구를 사용하여 Registry.npmjs.org/ 서버에서 필요한 패키지를 다운로드하여 로컬에서 사용할 수 있습니다.
이 패키지 관리 도구의 이름은 Node Package Manager(npm 패키지 관리 도구라고도 함)입니다. 이 패키지 관리 도구는 Node.js 설치 패키지와 함께 사용자 컴퓨터에 설치됩니다.
터미널에서 npm -v 명령을 실행하여 컴퓨터에 설치된 npm 패키지 관리 도구의 버전 번호를 확인할 수 있습니다.
3.2 npm 첫 경험
1. 프로젝트에 패키지를 설치하는 명령
프로젝트에 지정된 이름의 패키지를 설치하려면 다음 명령을 실행해야 합니다.
npm install 패키지의 전체 이름
위의 패키징 명령은 다음과 같습니다
.다음 형식으로 축약됩니다.
npm i 패키지의 전체 이름
2. 초기 패키지 설치 후 추가되는 추가 파일은 무엇입니까?
초기 패키지 설치가 완료되면 node_modules라는 추가 폴더와 구성 파일 package-가 생성됩니다. 프로젝트 폴더 아래에 lock.json이 있습니다.
그 중 node_modules 폴더는 프로젝트에 설치된 모든 패키지를 저장하는 데 사용됩니다. require()는 타사 패키지를 가져올 때 이 디렉터리에서 패키지를 검색하고 로드합니다.
package-lock.json 구성 파일은 패키지 이름, 버전 번호, 다운로드 주소 등 node_modules 디렉터리에 있는 각 패키지의 다운로드 정보를 기록하는 데 사용됩니다.
참고: 프로그래머는 node_modules 또는 package-lock.json 파일의 코드를 수동으로 수정해서는 안 됩니다. npm 패키지 관리 도구가 자동으로 이를 유지 관리합니다.
3. 지정된 버전의 패키지를 설치합니다.
기본적으로 npm install 명령을 사용하여 패키지를 설치하면 최신 버전의 패키지가 자동으로 설치됩니다. 특정 버전의 패키지를 설치해야 하는 경우 패키지 이름 뒤의 @ 기호를 통해 특정 버전을 지정할 수 있습니다. 예:
npm i [email protected]
4. 패키지의 의미적 버전 사양
버전 번호 패키지는 "점으로 구분된 십진수"로 총 3자리 숫자의 형태로 정의됩니다(예: 2.24.0).
각 숫자의 의미는 다음과 같습니다.
첫 번째 숫자: 주요 버전
두 번째 숫자: 기능 버전
세 번째 숫자: 버그 수정 버전
버전 번호 승격 규칙: 이전 버전 번호가 증가하는 한 다음 버전 번호는 0으로 돌아갑니다.
3.3 패키지 관리 구성 파일
npm은 프로젝트 루트 디렉터리에 package.json이라는 패키지 관리 구성 파일을 제공해야 한다고 규정하고 있습니다. 프로젝트와 관련된 일부 구성 정보를 기록하는 데 사용됩니다. 예:
프로젝트 이름, 버전 번호, 설명 등
프로젝트에 어떤 패키지가 사용되는지,
어떤 패키지가 개발 중에만 사용되는지,
어떤 패키지가 개발 및 배포 시 필요한지
다중 사용자 협업 시
발생하는 문제점 : 타사 패키지가 너무 커서 팀 구성원이 프로젝트 소스 코드를 공유하는 것이 불편합니다.해결 방법: 공유 시 node_modules를 제거합니다.
2. 프로젝트에 설치된 패키지를 기록하는 방법
프로젝트 루트 디렉터리에 프로젝트에 설치된 패키지를 기록하는 데 사용할 수 있는 package.json이라는 구성 파일을 만듭니다. 이렇게 하면 node_modules 디렉터리를 제거한 후 팀 구성원 간에 프로젝트의 소스 코드를 더 쉽게 공유할 수 있습니다.
참고: 향후 프로젝트 개발에서는 node_modules 폴더를 .gitignore 무시 파일에 추가해야 합니다.
3. package.json을 빠르게 생성
npm 패키지 관리 도구는 명령이 실행되는 디렉터리에 package.json 패키지 관리 구성 파일을 빠르게 생성할 수 있는 바로가기 명령을 제공합니다:
npm init -y
참고:
(1) 위 명령은 영어 디렉터리에서만 성공적으로 실행할 수 있습니다! 따라서 프로젝트 폴더 이름은 중국어가 아닌 영어로 명명해야 하며 공백이 없어야 합니다.
(2) npm install 명령을 실행하여 패키지를 설치할 때 npm 패키지 관리 도구는 패키지의 이름과 버전 번호를 package.json에 자동으로 기록합니다.
4. 종속성 노드
package.json 파일에는 npm install 명령을 사용하여 설치한 패키지를 기록하는 데 특별히 사용되는 종속성 노드가 있습니다.
5. 모든 패키지를 한 번에 설치합니다.
node_modules가 제거된 프로젝트를 얻으면 프로젝트를 실행하기 전에 모든 패키지를 프로젝트에 다운로드해야 합니다. 그렇지 않으면 다음과 유사한 오류가 보고됩니다.
npm install 명령(또는 npm i)을 실행하여 모든 종속 패키지를 한 번에 설치할 수 있습니다.
6. 패키지를 제거하려면
npm uninstall 명령을 실행하여 지정된 패키지를 제거할 수 있습니다.
npm uninstall 특정 패키지 이름
참고: npm uninstall 명령이 성공적으로 실행되면 제거된 패키지가 package.json의 종속성에서 자동으로 제거됩니다. . 제거에 대한 약칭은 없습니다.
7. devDependency 노드
일부 패키지가 프로젝트 개발 단계에서만 사용되고 프로젝트가 온라인 상태가 된 후에는 사용되지 않는 경우 해당 패키지를 devDependency 노드에 기록하는 것이 좋습니다.
따라서 개발 및 프로젝트 출시 후에 일부 패키지를 사용해야 하는 경우 이러한 패키지를 종속성 노드에 기록하는 것이 좋습니다.
다음 명령을 사용하여 패키지를 devDependency 노드에 기록할 수 있습니다.
3.4 느린 패키지 다운로드 속도 문제 해결
1. 패키지 다운로드 속도가 느린 이유는 무엇입니까?
npm을 사용하여 패키지를 다운로드할 때 기본적으로 해외 Registry.npmjs.org/ 서버에서 다운로드하므로 패키지 다운로드 속도가 매우 느려집니다. .
2. 타오바오 NPM 미러 서버
타오바오는 중국에 서버를 구축해 해외 공식 서버에 있는 패키지를 국내 서버와 동기화한 후 중국에서 패키지 배포 서비스를 제공하고 있습니다. 이를 통해 패키지 다운로드 속도가 크게 향상됩니다.
확장: 미러링은 한 디스크의 데이터가 다른 디스크에 동일한 복사본을 갖는 파일 저장 형태입니다.
3. npm의 패키지 미러 소스를 전환합니다.
패키지의 미러 소스는 패키지의 서버 주소를 참조합니다.
4. nrm
패키지의 이미지 소스를 보다 편리하게 전환하기 위해 nrm 도구를 설치할 수 있으며, nrm에서 제공하는 터미널 명령을 사용하면 패키지의 이미지 소스를 빠르게 확인하고 전환할 수 있습니다.
3.5 패키지 분류
npm 패키지 관리 도구를 사용하여 다운로드한 패키지는 두 가지 범주로 구분됩니다. 즉,
프로젝트 패키지
글로벌 패키지
1. 프로젝트 패키지
프로젝트의 node_modules 디렉터리에 설치되는 패키지는 모두 프로젝트 패키지입니다.
프로젝트 패키지개발 종속성 패키지(개발 중에만 사용되는 devDependency 노드에 기록된 패키지),
핵심 종속성 패키지(개발 및 프로젝트 중에 사용되는 종속성 노드에 기록된 패키지)
라는 두 가지 범주로 나뉩니다.
온라인 접속 후 사용)
2. 글로벌 패키지 npm install 명령어 실행 시 -g 파라미터를 지정하면 해당 패키지가 글로벌 패키지로 설치됩니다.
글로벌 패키지는 C:Usersuser 디렉터리AppDataRoamingnpmnode_modules 디렉터리에 설치됩니다.
참고:
(1) 도구 패키지만 전역적으로 설치해야 합니다. 유용한 터미널 명령을 제공하기 때문입니다.
(2) 패키지를 사용하기 전에 전역적으로 설치해야 하는지 확인하려면 공식 사용 지침을 참조하세요.
3. i5ting_toc
i5ting_toc은 md 문서를 html 페이지로 변환할 수 있는 작은 도구입니다. 사용 단계는 다음과 같습니다.
3.6 표준화된 패키지 구조
패키지의 개념과 패키지 다운로드 및 사용 방법을 이해한 후, 패키지 내부 구조에 대해 좀 더 자세히 살펴보겠습니다.
표준화된 패키지는 다음 세 가지 요구 사항을 충족해야 합니다.
(1) 패키지는 별도의 디렉터리에 있어야 합니다.
(2) 패키지의 최상위 디렉터리에는 package.json 패키지 관리 구성 파일이 포함되어야 합니다.
(3) package.json은 다음을 포함해야 합니다. 세 가지 속성: name, version 및 main. 각각 패키지 이름, 버전 번호 및 패키지 항목을 나타냅니다.
참고: 위의 세 가지 요구 사항은 표준화된 패키지 구조가 준수해야 하는 형식입니다. 더 많은 제약 조건을 보려면 다음 URL을 참조하세요. https://yarnpkg.com/zh-Hans/docs/package-json
3.7 개발 자체 패키지
1. 패키지의 기본 구조를 초기화합니다.
(1) 패키지의 루트 디렉터리로 새로운 itheima-tools 폴더를 생성합니다.
(2) itheima-tools 폴더에 다음 세 가지 파일을 생성합니다.
package.json(패키지 관리 구성 파일)
index.js(패키지 항목 파일)
README.md(패키지 설명 문서)
2. package.json 초기화
참고: 이름 - 응용 프로그램 또는 소프트웨어 버전을 알려주는 데 사용됩니다. 기본 - 응용 프로그램의 진입점을 설정합니다. 설명은 응용 프로그램/소프트웨어 패키지에 대한 간략한 설명입니다. 소프트웨어 패키지 기능과 관련된 키워드 배열(소프트웨어 패키지를 찾기 위해 노드 공식 웹사이트를 탐색하는 데 도움이 됨) - 소프트웨어 패키지의 라이센스를 지정합니다.
3. 패키지 문서를 작성합니다.
패키지의 루트 디렉터리에 있는 README.md 파일은 패키지 사용 문서입니다. 이를 통해 사용자 편의를 위해 패키지의 사용 지침을 마크다운 형식으로 미리 작성할 수 있습니다.
README 파일에 어떤 내용을 기재해야 하는지에 대한 필수 요구사항은 없으며, 패키지의 기능, 사용법, 주의사항 등을 명확하게 기술할 수 있으면 됩니다.
3.8 릴리스 패키지
1. npm 계정 등록
(1) www.npmjs.com/ 웹사이트를 방문하고 가입 버튼을 클릭하여 등록 사용자 인터페이스로 들어갑니다.
(2) 계정 관련 정보를 입력합니다: 성명, 공개 이메일, 사용자 이름, 비밀번호
(3) Create an Account 버튼을 클릭하여 계정을 등록합니다.
(4) 이메일에 로그인한 후 확인 링크를 클릭하여 계정을 확인합니다.
2.npm 계정 등록이 완료되면
npm 계정에 로그인합니다.
터미널에서 npm login 명령을 실행하고 사용자 이름과 비밀번호(password)를 입력하면 숨겨져 있어 볼 수 없습니다. 올바른 키(Enter)와 이메일 주소, 이메일 주소로 전송된 OTP 코드만 입력하면 됩니다. 성공적으로 로그인할 수 있습니다.
참고: npm login 명령을 실행하기 전에 먼저 패키지의 서버 주소를 npm 공식 서버로 전환해야 합니다. (이전에 타오바오 서버를 사용하셨다면 npm 공식 서버로 전환하셔야 합니다.) 그렇지 않으면 패키지 퍼블리싱이 실패하게 됩니다!
3. 패키지를 npm에 게시합니다
.
터미널을 패키지의 루트 디렉터리로 전환한 후 npm 게시 명령을 실행하여 패키지를 npm에 게시합니다(참고: 패키지 이름은 동일할 수 없습니다. 공식 웹사이트로 이동하여 같은 이름의 패키지가 있는지 확인하십시오).
4. 게시된 패키지를 삭제합니다.
npm unpublish package name --force 명령을 실행하여 npm에서 게시된 패키지를 삭제합니다.
참고:
(1) npm unpublish 명령은 72시간 이내에 게시된 패키지만 삭제할 수 있습니다.
(2) npm unpublish로 삭제한 패키지는 24시간 이내에 다시 게시할 수 없습니다.
(3) 패키지를 게시할 때 주의하고 게시하지 마세요. npm 의미없는 패키지!
4.1 캐시에서 로딩 우선 순위를 지정합니다.
모듈은 첫 번째 로드 후에 캐시됩니다. 이는 또한 require()를 여러 번 호출해도 모듈의 코드가 여러 번 실행되지 않는다는 것을 의미합니다.
참고: 내장 모듈, 사용자 정의 모듈, 타사 모듈인지 여부에 관계없이 먼저 캐시에서 로드되므로 모듈 로드 효율성이 향상됩니다.
4.2 내장 모듈의 로딩 메커니즘
내장 모듈은 Node.js에서 공식적으로 제공하는 모듈입니다. 내장 모듈은 로딩 우선순위가 가장 높습니다.
예를 들어, require('fs')는 항상 내장 fs 모듈을 반환합니다. node_modules 디렉터리에 동일한 이름을 가진 패키지가 있더라도 fs라고도 합니다.
4.3 사용자 정의 모듈 로딩 메커니즘
require()를 사용하여 사용자 정의 모듈을 로드할 때 ./ 또는 ../로 시작하는 경로 식별자를 지정해야 합니다. 사용자 정의 모듈을 로드할 때 ./ 또는 ../와 같은 경로 식별자가 지정되지 않으면 노드는 이를 내장 모듈 또는 타사 모듈로 로드합니다.
동시에 require()를 사용하여 커스텀 모듈을 가져올 때 파일 확장자가 생략되면 Node.js는 다음 파일을 순서대로 로드하려고 시도합니다.
(1) 정확한 파일 이름에 따라 로드
(2) 완료 .js 확장자를 로드하여 로드합니다
. (3) .json 확장자를 완료하여 로드합니다.
(4) .node 확장자를 완료하여 로드합니다.
(5) 로드에 실패하면 터미널에서 오류를 보고합니다.
4.4 타사 모듈의 로딩 메커니즘이
require로 전달되는
경우() 모듈 식별자가 내장 모듈이 아니고 './' 또는 '../'으로 시작하지 않는 경우 Node.js는 /node_modules 폴더에서 타사 모듈을 로드하려고 시도합니다. 현재 모듈의 상위 디렉토리.
해당 타사 모듈을 찾을 수 없는 경우 한 수준 위의 상위 디렉터리로 이동하여 파일 시스템의 루트 디렉터리까지 로드됩니다.
예를 들어 'C:Usersitheimaprojectfoo.js' 파일에서 require('tools')가 호출된다고 가정하면 Node.js는 다음 순서로 검색합니다.
(1) C:Usersitheima project node_modulestools
(2) C:Usersitheimanode_modulestools
(3) C:Usersnode_modulestools
(4) C:node_modulestools
4.5 모듈로서의 디렉토리 디렉토리
를 모듈로 전달할 때 식별자, require()를 로드할 때 세 가지 로드 방법이 있습니다.
(1) 로드되는 디렉터리에서 package.json이라는 파일을 찾고, 로드할 require()의 진입점 역할을 하는 main 속성을 찾습니다
. 2) 디렉터리에 있는 경우 package.json 파일이 없거나 기본 항목이 존재하지 않거나 구문 분석할 수 없는 경우 Node.js는 해당 디렉터리에 index.js 파일을 로드하려고 시도합니다.
(3) 위의 두 단계가 실패하면 Node.js는 누락된 모듈을 보고하는 오류 메시지를 터미널에 인쇄합니다. 오류: 'xxx' 모듈을 찾을 수 없습니다.
이 기사는 https://juejin.cn/post에서 재현됩니다. /7083445004240158757