[javascript] Angular2 TypeScript 파일과 JavaScript 파일을 서로 다른 폴더 ( ‘dist’)로 분리

Program / 글쓴이

다음 과 같은 파일 구조를 포함하는 angular.io 웹 사이트에서 5 분 빠른 시작 을 사용하고 있습니다.

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.json은 다음과 같은 코드 블록입니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

또한 package.json :

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

sourceMap을 true에서 false로 변경하므로 코드 편집기에서 맵 파일이 다시 생성되지 않지만 js 파일은 여전히 ​​생성됩니다.

나는 ts 파일 만 작업하고 js 및 js.map 파일의 브런치를 얻고 싶지 않습니다. 모든 ts 파일을 앱 폴더 및 모든 js 및 js와 같은 일반 개발 플로 더에 넣으려면 어떻게해야합니까? 파일을 dist라는 폴더에 매핑합니까?

이에 대한 좋은 예는 angular2-webpack-quickstart 일 수 있습니다. 하지만 어떻게하는지 몰랐어요?

물론 수동으로 수행하는 방법에 대한 조언.

감사,

답변

아마도 늦었지만 여기에 두 단계의 해결책이 있습니다.

1 단계

다음 으로 업데이트 하여 system.config.js 를 변경하십시오 .'app''dist/app'

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

이제 다음과 같이 보일 것입니다.

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

2 단계

dist 폴더를 만듭니다 . tsconfig.json을

편집 하고 다음 을 추가하십시오.

"outDir": "dist"

결과 tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

실행 하면 dist 폴더 에 npm start컴파일 된 파일 .js과 .map.js파일이 모두 표시됩니다 .

참고 : 다른 답변을 살펴보십시오. 그들은 매우 유용하고 유익합니다.

답변

내 솔루션은 위와 약간 다릅니다. 여기에 정의 된 Angular2 빠른 시작 시드에서 시작했습니다. https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

그리고 다음 사항 만 변경했습니다.

  • 추가 "outDir": "../dist"로tsconfig.json
  • 변경된 baseDir속성 내부 bs-config.json에"baseDir": ["dist", "src"]

그런 다음 npm run start이전과 같이 작동하지만 (복사없이 html / css 및 기타 파일 포함) 컴파일 .js되고 .map파일이 내장되어 디렉토리를 dist/app오염시키지 않습니다 src/app.

이것이 테스트에 어떤 영향을 미치는지 아직 테스트하지 않았습니다.

답변

나도 늦었을지 모르지만 이렇게했습니다.

먼저 raheel shan이 말한 것을하십시오 .

그런 다음 dist 폴더를 만듭니다 .

폴더를 만든 후 파일로 이동하여 다음 tsconfig.json을 추가하십시오.

"outDir": "dist"

결과 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

당신은 지금 실행하는 경우 npm start및 파일 저장 당신은 모두가 컴파일 볼 수 .js와 .map.js에서 DIST 폴더.

답변

고맙습니다 raheel shan, 당신의 대답은 시작을주었습니다.

@Adavo가 위의 의견에서 올바르게 질문했듯이

불행히도 내 html / css 파일은 dist 폴더에 없습니다. dist 폴더의 모든 html / css를 복사하려면 어떻게해야합니까?

이 질문에 대한 대답은 * 모든 .ts 파일과 주로 @Component의 “templateURL”속성에서 ‘/'(루트 디렉토리에서)를 사용하여 HTML / CSS 파일에 대한 전체 경로를 제공하는 것입니다.

많은 시간이 지난 후-나는 그것을 알아 냈습니다-Gulp를 사용하지 않고 🙂 Yipppeee

답변

불행히도 내 html / css 파일은 dist 폴더에 없습니다. dist 폴더의 모든 html / css를 복사하려면 어떻게해야합니까?

Angular 2의 상대 경로는 Angular 2 기사의 Component-Relative Paths에 따라 파일 (CommonJs, SystemJs, .. 등)을로드하는 방법에 대해 프레임 워크가 유연하기를 원하기 때문에 그렇게 간단하지 않습니다 .

이 기사 module.id에서 CommonJs (tsconfig.json 확인)와 함께 사용할 때 설명 하듯이 모듈의 절대 루트를 포함하며 상대 경로를 구성하는 데 사용할 수 있습니다.

따라서 더 나은 대안은 css / html 파일을 ts 파일과 함께두고 아래와 같이 구성 요소를 구성하는 것입니다 . dist 라는 별도의 폴더에 빌드 파일이 있다고 가정합니다 . 이렇게하면 css 및 html 파일이 다음과 같이로드됩니다. 파생 된 빌드 경로를이를 포함하는 소스 경로로 변환하여 상대 경로를 사용하는 데 문제가 없습니다-본질적으로 제거 /dist/하거나 이름을 변경하여 /src/😉

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

소스 및 빌드에 대해 별도의 폴더가있는 경우 대신 다음을 수행 할 수 있습니다.

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

답변

따라서 이것을 해결하려면 :

불행히도 내 html / css 파일은 dist 폴더에 없습니다. dist 폴더의 모든 html / css를 복사하려면 어떻게해야합니까?

@raheel shan과 @Lirianer의 답변의 단계를 수행하십시오. … 그러면 이것으로 끝낼 수 있습니다.

나는 npm 스크립트를 사용하여 내 목적을 위해 이것을 해결했습니다. 내 package.json 파일의 스크립트 섹션은 다음과 같습니다. 해결책은 onchnage(npm 패키지- npm install --save onchange)와 tsc서버를 동시에 실행 하는 것입니다. 그런 다음 rsync를 사용하여 이동하려는 자산을 복사합니다.

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

Windows 사용자를 위해 cwRsync 와 같은 패키지 솔루션을 rsync통해 얻을 수 있습니다 .Cygwin

답변

@WillyC 의 제안을 시도 하고 매력처럼 작동했습니다 . 파일에 onchange종속성을 추가 해야 package.json합니다. 처음 실행할 때 깨끗한 설정을하고 남은 html / css 파일을 제거하기 위해 약간의 추가 스크립트를 추가했습니다 (TSC에서도 동일하게 수행 할 수 있다면 좋을 것입니다).

어쨌든, 여기 내 package.json파일 의 섹션이 있습니다.

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

에 대한 rsync 삭제, 통지서 --delete상의 플래그 rsync의 명령 watchassets스크립트