Angular2 TypeScript 파일과 JavaScript 파일을 서로 다른 폴더 ( 'dist')로 분리

다음 과 같은 파일 구조를 포함하는 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스크립트

Angular2 TypeScript 파일 및 JavaScript 파일을 다른 폴더에 저장

다음은 Angular 2 최신 버전 V2.1.1에 대한 구성이며 매우 잘 작동합니다!

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

@Nagyl에서 영감을 받아 나만의 방식을 개발했으며 공유 할 가치가 있다고 생각합니다.

1) cpx 설치

npm install cpx

2) bs-config.json을 업데이트하고 baseDir을 "src"에서 "dist"로 변경합니다.

"baseDir":"dist"

3) tsconfig.json을 업데이트하고 컴파일러 옵션 끝에 outDir을 추가합니다.

"outDir": "../dist"

4) package.json 업데이트 : 4.1) 스크립트 끝에 새 명령 추가 :

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) "cpx"명령을 포함하도록 "start"줄 수정 :

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

plunker 가 앵귤러 2 ts 템플릿에서하는 .ts것처럼 브라우저에서 파일을 트랜스 파일 할 수 있습니다 .

편집기를 시작하고 새로 만들기를 선택한 다음 AngularJS 및 2.0.x (TS) 옵션 (맨 아래)을 선택하십시오. 그러나 웹팩 (또는 다른 번들링 도구)을 사용하는 요점은 파일을 로컬로 트랜스 파일하는 것입니다.

나는 위에서 언급 한 옵션의 몇 가지 시도하고 마지막으로, 이것은 내가에 정착 것입니다 : 달라요 - 확장을 위해 Visual Studio Code.

설치하는 방법:

• 보기-> 확장
• 출현
• 설치
• 새로 고침
• 보기-> 명령 팔레트
• 엿보기 없음
• 필요에 따라 .vscode / settings.json을 수정하십시오 (아래에 나와 있음).

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

2017 년 1 월 25 일-업데이트 : angular-cli 가 즉시 처리됩니다. 그리고 설치가 작동합니다.

여기에 나열된 솔루션을 시도했습니다. 그들은 좋지만 나에게는 이상적이지 않습니다. 나는 간단한 해결책을 원합니다. 모든 구성 요소 파일에서 경로 정보를 하드 코딩하고 싶지 않습니다. 나는 이것을 처리하기 위해 더 많은 npm 패키지를 설치하고 싶지 않습니다.

그래서 가장 쉬운 대안을 생각해 냈습니다. 이 질문에 대한 직접적인 대답은 아니지만 저에게는 매우 잘 작동합니다.

작업 공간 설정을 조정하여 js아래에 있는 파일이/app 표시되지 했습니다. 그들은 여전히 ​​거기에 있습니다. 내 작업 공간에서 숨겨져 있습니다. 나에게는 충분합니다.

저는 Sublime Text를 사용하고 있으므로 프로젝트 설정에 대한 내용은 다음과 같습니다.

"file_exclude_patterns": ["app/*.js"]

다른 많은 편집자들도 비슷한 기능을 가지고 있다고 확신합니다.

최신 정보:

Angular CLI를 사용하십시오. 모든 것이 자동으로 처리됩니다.

빠른 시작의 파일이 포함 된 Angular 4의 경우 다음 작업 만 수행하면됩니다 (이전에 언급 한 답변의 혼합이지만 약간 다른 값).

• tsconfig.json에서 (추가) : "outDir": "../dist"
• bs-config.json에서 (변경) : "baseDir": ["dist", "src"],
• bs-config.e2e.json에서 (변경) : "baseDir": ["dist", "src"],

systemjs.config.js는 변경되지 않습니다.

나는 @raheel의 제안을 시도했고 그것은 나를 위해 일했습니다. 필요에 따라 구조를 수정했습니다.

다음 구조를 사용하고 있습니다.

이를 얻기 위해 두 파일 만 수정했습니다. systemjs.config.js 및 2.tsconfig.json

systemjs.config.js에서 다음과 같이 변경했습니다.

map: { // previously it was app: 'app', app: 'app/js', ...

그리고 tsconfig.json에서 추가해야합니다 "outDir": "app/js"

Angular 2.4로 작업하고 있습니다. 작동하려면 추가 단계가 필요했습니다. 이것은 index.html의 main.js 파일에 대한 업데이트 systemJs 참조입니다.

System.import ( 'main.js'). catch (function (err) {console.error (err);});

에:

System.import ( 'dist / main.js'). catch (function (err) {console.error (err);});

Raheel Shan이 말한 것 외에도. 이제 올바른 자바 스크립트 파일을 가져 오기 위해 반영하기 위해 index.html을 추가로 변경해야했습니다.

다음은 내 측면의 요약입니다.

tsconfig.json

전에

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

후:

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

systemjs.config.js

전에:

'app': 'app',

후:

'app': 'dist/app', //'app

index.html

전에:

System.import('main.js').catch(function(err){ console.error(err); });

후:

System.import('dist/main.js').catch(function(err){ console.error(err); });