Oddzielne pliki Angular2 TypeScript i pliki JavaScript do różnych folderów, np. „Dist”

Korzystam z 5-minutowego szybkiego startu ze strony angular.io, która zawiera taką strukturę plików:

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

tsconfig.json to taki blok kodu ：

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

Również plik 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"
  }
}

Zmieniam sourceMap z true na false, więc w edytorze kodu plik mapy nie jest generowany ponownie, ale plik js nadal jest generowany.

Chcę pracować tylko na pliku ts i nie chcę pobierać brunchu plików js i js.map, co powinienem zrobić, aby umieścić wszystkie moje pliki ts w moim zwykłym folderze deweloperskim, takim jak folder aplikacji i wszystkie js i js. mapować pliki do folderu o nazwie dist?

Dobrym przykładem może być angular2-webpack-quickstart . Ale nie wiedziałem, jak oni to robią?

Wszelkie porady, jak to zrobić, oczywiście nie ręcznie.

Dzięki,

Prawdopodobnie późno, ale tutaj jest rozwiązanie dwuetapowe.

Krok 1

Zmień system.config.js , aktualizując 'app'do 'dist/app':

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

Teraz będzie wyglądać tak:

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

Krok 2

Utwórz folder dist .

Edytuj tsconfig.json i dodaj:

"outDir": "dist"

Wynik tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

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

Uruchom npm starti powinieneś zobaczyć wszystkie skompilowane .jsi .map.jspliki w folderze dist .

Uwaga : przejrzyj inne odpowiedzi. Są również przydatne i pouczające.

Moje rozwiązanie różni się nieco od powyższego. Zacząłem od ziarna Angular2 Quickstart zdefiniowanego tutaj: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

A potem tylko zmienił następujące:

• Dodano "outDir": "../dist"dotsconfig.json
• Zmieniono baseDiratrybut wewnątrz bs-config.jsonna"baseDir": ["dist", "src"]

Wtedy npm run startdziała jak poprzednio (nawet html / css i inne pliki bez kopiowania), ale skompilowane .jsi .mappliki są wbudowane dist/appi nie zanieczyszczają twojego src/appkatalogu.

Pamiętaj, że nie testowałem jeszcze, jak to wpływa na testowanie.

Mogę się też spóźnić, ale zrobiłem to.

Najpierw zrób to , co powiedział Raheel Shan .

Następnie utwórz folder dist .

Po utworzeniu folderu przejdź do pliku tsconfig.jsoni dodaj to:

"outDir": "dist"

Wynikowy 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"
  ]
}

Jeśli teraz uruchomić npm starti zapisać plik powinien być widoczny przez cały skompilowany .jsi .map.jsw dist folderu.

Dzięki, Raheel Shan, twoja odpowiedź dała początek,

Jak @Adavo słusznie zapytał powyżej w komentarzach

Niestety, moich plików html / css nie ma w folderze dist. Jak to zrobić, aby skopiować cały html / css do folderu dist?

Odpowiedzią na to pytanie jest * podanie pełnej ścieżki do pliku HTML / CSS, używając znaku „/” (z katalogu głównego) we wszystkich plikach .ts, a głównie we właściwości „templateURL” @Component

po jakimś czasie - zrozumiałem - bez użycia Gulpa :) Yipppeee

Niestety, moich plików html / css nie ma w folderze dist. Jak to zrobić, aby skopiować cały html / css do folderu dist?

Względne ścieżki w Angular 2 nie są takie proste, ponieważ framework chce być elastyczny w sposobie ładowania plików (CommonJs, SystemJs, ... itd.) Zgodnie z artykułem Component-Relative Paths in Angular 2 .

Jak wyjaśniono w artykule, module.idgdy jest używany z CommonJs (sprawdź plik tsconfig.json) zawiera bezwzględny katalog główny modułu i może być użyty do skonstruowania ścieżki względnej.

Więc lepszą alternatywą może być pozostawienie plików css / html z plikami ts i skonfigurowanie komponentu jak poniżej, zakładając, że masz tylko pliki kompilacji w oddzielnym folderze o nazwie dist .. W ten sposób twoje pliki css i html zostaną załadowane z nie ma problemu z używaniem ścieżek względnych poprzez konwersję wyprowadzonej ścieżki kompilacji na źródłową, która je zawiera - zasadniczo usuwając /dist/lub zmieniając jej nazwę na /src/;)

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

jeśli masz oddzielne foldery dla źródła i kompilacji, możesz to zrobić:

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

Aby rozwiązać ten problem:

Niestety, moich plików html / css nie ma w folderze dist. Jak to zrobić, aby skopiować cały html / css do folderu dist?

Wykonaj kroki w odpowiedziach @raheel shan i @ Lirianer. ... wtedy możesz to zakończyć tym.

Rozwiązałem to dla moich celów za pomocą skryptów npm. Poniżej znajduje się sekcja skryptów w moim pliku package.json. Rozwiązaniem jest uruchomienie onchnage(pakietu npm - npm install --save onchange) jednocześnie z tscserwerem. Następnie użyj rsync, aby skopiować zasoby, które chcesz przenieść:

"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/"
}

Dla tych z Was, którzy korzystają z systemu Windows, można uzyskać rsyncza pośrednictwem Cygwinlub z pakietami rozwiązań, takich jak cwRsync .

Wypróbowałem sugestię @WillyC i zadziałałem jak marzenie, po prostu zwróć uwagę, że będziesz musiał dodać onchangezależność do swojego package.jsonpliku. Dodałem tylko trochę dodatkowych skryptów, aby mieć czystą konfigurację przy pierwszym uruchomieniu, a także aby usunąć pozostałe pliki html / css (byłoby miło, gdyby to samo można było zrobić dla TSC)

W każdym razie tutaj jest sekcja mojego package.jsonpliku

{
  ...
  "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"
  }
}

W przypadku rsyncusuwania zwróć uwagę na --deleteflagę w rsyncpoleceniu watchassetsskryptu

Pliki Angular2 TypeScript i pliki JavaScript w innym folderze

Oto moja konfiguracja dla Angular 2 w najnowszej wersji V2.1.1 i działa bardzo dobrze!

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);

Zainspirowany @Nagyl, wypracowałem swój własny sposób i uważam, że warto się nim podzielić:

1) Zainstaluj cpx

npm install cpx

2) Zaktualizuj bs-config.json i zmień baseDir z „src” na „dist”

"baseDir":"dist"

3) Zaktualizuj tsconfig.json i dodaj outDir na końcu kompilatora Opcje:

"outDir": "../dist"

4) Zaktualizuj package.json: 4.1) dodaj nowe polecenie do końca skryptów:

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

4.2) zmodyfikuj wiersz „start”, aby zawierał polecenie „cpx”:

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

Możesz transpilować .tspliki w przeglądarce, tak jak robi to Plunker w swoim szablonie kątowym 2 ts.

Po prostu uruchom edytor, wybierz nowy, następnie AngularJS i opcję 2.0.x (TS) (na samym dole). Ale cały sens używania webpacka (lub dowolnego innego narzędzia do sprzedaży wiązanej) polega na lokalnej transpozycji plików.

Wypróbowałem kilka z wyżej wymienionych opcji i ostatecznie zdecydowałem się na: Peep - rozszerzenie dla Visual Studio Code.

Jak zainstalować:

• Widok -> Rozszerzenia
• Ćwierkanie
• zainstalować
• Przeładować
• Widok -> Paleta poleceń
• Peep None
• zmodyfikuj plik .vscode / settings.json zgodnie z wymaganiami (moje pokazane poniżej)

-

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

25.01.2017 - aktualizacje: angular -cli po wyjęciu z pudełka, dba o to. i prace instalacyjne i teraz.

Wypróbowałem wymienione tutaj rozwiązania. Są dobre, ale nie są dla mnie idealne. Chcę prostego rozwiązania. Nie chcę na stałe zakodować informacji o ścieżce we wszystkich moich plikach składowych. Nie chcę instalować więcej pakietów npm, aby się tym zająć.

Więc wymyślam najłatwiejszą alternatywę. To nie jest bezpośrednia odpowiedź na to pytanie, ale dla mnie działa bardzo dobrze.

Po prostu poprawiam ustawienia mojego obszaru roboczego, tak aby jspliki w/app nie były wyświetlane. Nadal tam są. Są po prostu ukryte w moim obszarze roboczym. Dla mnie to wystarczy.

Używam Sublime Text, więc oto, co mam dla ustawień mojego projektu:

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

Jestem pewien, że wiele innych edytorów ma podobne funkcje.

AKTUALIZACJA:

Po prostu użyj Angular CLI. Wszystko odbywa się automatycznie.

W przypadku Angular 4 z plikami z przewodnika Szybki start musiałem tylko wykonać następujące czynności (kombinacja wcześniej podanych odpowiedzi, ale nieco inne wartości):

• W tsconfig.json (dodaj): "outDir": "../dist"
• W bs-config.json (zmień): "baseDir": ["dist", "src"],
• W bs-config.e2e.json (zmień): "baseDir": ["dist", "src"],

Bez zmian w systemjs.config.js.

Wypróbowałem sugestię @raheel i zadziałało to dla mnie. Zmodyfikowałem konstrukcję zgodnie z moimi potrzebami.

Używam następującej struktury

Aby to uzyskać, zmodyfikowałem tylko dwa pliki 1. systemjs.config.js i 2.tsconfig.json

W systemjs.config.js zmieniłem na

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

iw tsconfig.json muszę dodać "outDir": "app/js"

Pracuję z Angular 2.4. Potrzebowałem dodatkowego kroku, aby to zadziałało. To było odniesienie do aktualizacji systemJs do pliku main.js w index.html pochodzi z:

System.import ('main.js'). Catch (function (błąd) {console.error (błąd);});

do:

System.import ('dist / main.js'). Catch (function (błąd) {console.error (błąd);});

Dodając do tego, co powiedział Raheel Shan. Musiałem dokonać dodatkowej zmiany w pliku index.html, aby teraz zaimportować poprawny plik javascript.

Oto podsumowanie z mojej strony.

tsconfig.json

Przed

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

Po:

{
  "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

Przed:

'app': 'app',

Po:

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

index.html

Przed:

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

Po:

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