2017-12-04 20 views
3

각도 2+와 재사용 가능한 코드를 공유하는 가장 적합한 방법은 무엇입니까? 현재 Angular 4, VSCode, TypeScript, npm 및 Angular CLI를 사용하고 있습니다. 저는 업그레이드하고 싶은 Angular 1.3 앱이있는 C# 개발자입니다. 나는 Angular 2+에서 속도를 높이기 위해 노력하고 있습니다. 저는 현재 재사용으로 이익을 얻을 수있는 더 큰 응용 프로그램을 올바르게 구조화하는 방법에 중점을 둡니다.각도 재사용 가능한 모듈 및 구성 요소

내가 (각도와 응답 SPA 프레임 워크를 구축)를 PluralSite 과정을 통해 작업 및 작업 간단한 사이트 (단지 프런트 엔드)가있다. "SPA 프레임 워크"와 앱의 개념적 분리가 마음에 들고 프레임 워크를 전개/확장하고 재사용하는 것이 좋을 것입니다.

은 내가 SPA 프레임 워크를 분리하고 여러 응용 프로그램에서의 사용을 따라서 만 SPA 프레임 워크 코드의 단일 복사본을 유지하는 방법을 알아 내려고 노력하고있어. 필자가 수행 한 분리 및 재사용을 성공적으로 수행 할 수 있다면 재사용 가능한 코드 작성에 중점을두고 있으며 대개 기업 규모 응용 프로그램의 60 % 이상을 구성 할 것입니다. 아래에서 좀 더 자세한 내용과 몇 가지 구체적인 질문을 제공했습니다.

내가 (및 수입) 새로운 응용 프로그램 내에서 SPA 프레임 워크의 타이프 스크립트 코드를 성공적으로 "참조"할 수 있었다, 그러나 나는 성공적으로 구축하거나 실행할 수 아니에요. 이 시점에서 공유 할만한 유용한 결과물이 없지만 내가 어떤 일을하는지 알게되면 내가 올바른 접근 방식에 근접하지 않는다고 생각하게됩니다.

파일 구조는 SPA 프레임 워크 폴더 구조가 응용 프로그램 폴더 구조 내에 존재하지 않음을 의미 별개입니다. PluralSite 과정을 따르면 프로젝트와 SPA 프레임 워크가 프로젝트 구조 내의 "동일한 레벨"(피어 폴더)에있는 구조가되었습니다. Angescript에 의해 구동되는 Typescript 빌드가 동시에 발생했으며 하나의 "node_modules"폴더를 참조했습니다.

질문 내가 개발하고 별도의 프로젝트와 SPA 프레임 워크 코드 (및 기타 유사 "공유 할 수있는"구성 요소)를 구축하고 (나는이 될 것이라고 믿고있어 별도의 node_modules 종속성을 가지고 어떻게

  1. 바람직한)? 필자는 SPA 프레임 워크가 독립적으로 빌드 될 수 있다고 가정하지만,이 응용 프로그램은 SPA 프레임 워크에 종속됩니다. 나는 새로운 "app 2"를 만들 수 있고 SPA 프레임 워크 용 코드를 복제 할 필요가 없다.

  2. 나는 결국 app1 또는 app2 (및 ... 3, 4, 5 등)를 빌드 할 때 빌드가 응용 프로그램의 node_module 종속성을 참조하며, (내가 앱을 만들 때) SPA 프레임 워크를 독자적으로 그리고 개별적으로 구축해야합니다.

는 기본적으로 별도의 코드를 관리하고 코드를 포함하고 변종을 유지하지 않고 SPA 프레임 워크 (및 기타 재사용 가능한 코드)를 활용하는 방법을 찾고.

도움을 주시면 감사하겠습니다.

+0

NPM 모듈을 사용할 수 있도록되어 있습니다 응용 프로그램에서

  • 지금 방금 npm install YOUR_SHARED_PROJECT_NAME 응용 프로그램에서 공유 프로젝트를 포함 할 수 있습니다 NPM (또는 개인 NPM 저장소)에 프로젝트를 게시 네가 요구하는 것을 위해. '프레임 워크'는 귀하의 경우에 NPM 모듈 또는 그 세트로 간주됩니다. – estus

  • 답변

    3

    내가 원하는 것을 달성 한 방법은 다음과 같습니다.

    1. 는 새로운 각도 프로젝트 (내가 angular-cli을 사용하는 것이 좋습니다하지만 당신은 필요가 없습니다)
    2. 당신이 여기 당신의 응용 프로그램에서 공유 할하려는 코드를 추가를 만듭니다. 예를 들어 공유 구성 요소 프로젝트를 만들었습니다.
    3. 일관성을 유지하려면 각도 패키지 형식을 따르십시오.
    4. 저는 프로젝트를 빌드하고 패키지화하기 위해 ng-packagr을 사용합니다. (https://github.com/dherges/ng-packagr)
    +0

    가 동의하면 노드 패키지가 최선의 방법입니다. 나는 또한'ng-packagr'을 사용합니다. 또한 정말 도움이되는 것은 프로젝트에서 공유 패키지를'npm 링크 '하는 것입니다. 그래서 그들을 "인라인"으로 수정할 수 있습니다. – masterfloda