Separare i file TypeScript Angular2 e i file JavaScript in diverse cartelle, forse “dist”

Sto usando il quickstart di 5 minuti dal sito angular.io, che contiene una struttura di file come questa:

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

il file tsconfig.json è un blocco di codice come questo:

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

Anche il pacchetto.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" } } 

Modifico sourceMap da true a false, quindi nell’editor di codice, il file di mappa non viene generato di nuovo, ma il file js viene comunque generato.

Voglio lavorare solo sul file ts e non voglio ottenere un brunch di file js e js.map, cosa dovrei fare per mettere tutti i miei file ts nel mio normale sviluppo di floder come la cartella app e tutti i js e js. mappare i file in una cartella chiamata dist?

    Un buon esempio di questo potrebbe essere angular2-webpack-quickstart . Ma non ho capito come lo fanno?

    Qualche consiglio su come farlo, ovviamente non manualmente.

    Grazie,

    Probabilmente in ritardo ma ecco una soluzione in due passaggi.

    Passo 1

    Cambia system.config.js aggiornando 'app' a 'dist/app' :

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

    Ora sarà simile a questo:

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

    Passo 2

    Crea la cartella dist .

    Modifica tsconfig.json e aggiungi:

     "outDir": "dist" 

    Il risultato tsconfig.json :

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

    Avvia npm start e dovresti vedere tutti i file compilati .js e .map.js nella cartella dist .

    Nota : passa attraverso altre risposte. Sono abbastanza utili e anche informativi.

    La mia soluzione è un po ‘diversa da quella sopra. Stavo iniziando dal seme Quickstart di Angular2 definito qui: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

    E poi ha solo cambiato il seguente:

    • Aggiunto "outDir": "../dist" a tsconfig.json
    • Modificato l’attributo baseDir all’interno di bs-config.json in "baseDir": ["dist", "src"]

    Quindi npm run start funziona come prima (anche html / css e altri file senza alcuna copia), ma i file .js e .map compilati sono incorporati in dist/app e non inquinano la directory src/app .

    Si prega di notare che non ho ancora testato il modo in cui questo influenza i test.

    Potrei essere anche in ritardo, ma l’ho fatto.

    Prima fai quello che ha detto raheel shan .

    Quindi creare la cartella dist .

    Dopo aver creato la cartella, vai al file tsconfig.json e aggiungi questo:

     "outDir": "dist" 

    Il risultato è 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" ] } 

    Se ora esegui npm start e salvi un file, dovresti vedere tutti i file .js e .map.js compilati nella cartella dist .

    Grazie, rake shan, la tua risposta ha dato un vantaggio,

    Come @Adavo ha giustamente chiesto in precedenza nei commenti

    Sfortunatamente, i miei file html / css non sono presenti nella cartella dist. Come fare per copiare tutto html / css nella cartella dist?

    La risposta a questa domanda è * fornire il percorso completo del file HTML / CSS usando ‘/’ (dalla directory principale) in tutti i file .ts e principalmente nella proprietà “templateURL” di @Component

    dopo un sacco di tempo – l’ho capito – senza usare Gulp 🙂 Yipppeee

    Sfortunatamente, i miei file html / css non sono presenti nella cartella dist. Come fare per copiare tutto html / css nella cartella dist?

    I percorsi relativi in ​​Angular 2 non sono così semplici perché il framework vuole essere flessibile con il modo in cui si caricano i file (CommonJs, SystemJs, .. ecc.) In base ai percorsi relativi ai componenti nell’articolo Angular 2 .

    Come l’articolo spiega module.id quando usato con CommonJs (controlla il tuo tsconfig.json) contiene la radice assoluta del modulo e può essere usato per build un percorso relativo.

    Quindi un’alternativa migliore potrebbe essere quella di lasciare i file css / html con i file ts e configurare il tuo componente come di seguito, assumendo che tu abbia i tuoi file di build in una cartella separata chiamata dist . In questo modo i tuoi file css e html verranno caricati con nessun problema nell’usare percorsi relativi convertendo il percorso di generazione derivato in quello di origine che li contiene – in sostanza rimuovendo /dist/ o rinominandolo in /src/ 😉

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

    se hai cartelle separate per l’origine e la compilazione, puoi farlo invece:

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

    Quindi, per risolvere questo:

    Sfortunatamente, i miei file html / css non sono presenti nella cartella dist. Come fare per copiare tutto html / css nella cartella dist?

    Fai i passi sia nelle risposte di @raheel shan che di @ Lirianer. … quindi puoi finirlo con questo.

    Ho risolto questo per i miei scopi utilizzando gli script npm. La sezione degli script nel mio file package.json è riportata di seguito. La soluzione è eseguire onchnage (un pacchetto npm install --save onchangenpm install --save onchange ) in concomitanza con tsc e il server. Quindi usa rsync per copiare le risorse che vuoi spostare:

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

    Per quelli di voi su Windows è ansible ottenere rsync tramite Cygwin o con soluzioni pacchettizzate come cwRsync .

    Ho provato il suggerimento di @WillyC e ho funzionato come un fascino, basta notare che dovrai aggiungere la dipendenza onchange al tuo file package.json . Ho aggiunto un po ‘di script in più per avere una configurazione pulita al primo avvio e anche per rimuovere i file html / css rimasti (sarebbe bello se lo stesso potesse essere fatto per TSC)

    Ad ogni modo, ecco una sezione del mio file 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" } } 

    Per l’eliminazione di rsync , notare il flag --delete sul comando rsync dello script watchassets

    Angular2 File TypeScript e file JavaScript in diverse cartelle

    Ecco la mia config per Angular 2 l’ultima versione V2.1.1, e funziona molto bene!

    tsconfig.json

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

    Ispirato da @Nagyl, ho sviluppato la mia strada e credo che valga la pena condividere:

    1) Installa cpx

     npm install cpx 

    2) Aggiorna bs-config.json e cambia baseDir da “src” a “dist”

     "baseDir":"dist" 

    3) Aggiorna tsconfig.json e aggiungi outDir alla fine di compilerOptions:

     "outDir": "../dist" 

    4) Update package.json: 4.1) aggiungi un nuovo comando alla fine degli script:

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

    4.2) modifica la riga “start” per includere il comando “cpx”:

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

    Passaggio 2 modifica

    Passaggio 3 modifica

    Passaggio 4 modifica

    Puoi .ts file .ts nel browser, proprio come fa il plunker nel loro modello angular di 2 ts.

    Basta avviare l’editor, selezionare new, quindi AngularJS e 2.0.x (TS) (in fondo). Ma l’intero punto di utilizzo del webpack (o di qualsiasi altro strumento di raggruppamento) è quello di traspare i file localmente.

    Ho provato alcune delle opzioni di cui sopra e, infine, questo è quello che ho deciso: Peep – un’estensione per Visual Studio Code .

    Come installare:

    • Visualizza -> Estensioni
    • Sbirciare
    • Installare
    • Ricaricare
    • Visualizza -> Command Pallet
    • Peep Nessuno
    • modificare .vscode / settings.json come richiesto (il mio mostrato sotto)

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

    25/01/2017 – aggiornamenti: angular-cli out of the box, si prende cura di questo. e lavori di installazione e ora.

    Ho provato le soluzioni elencate qui. Sono buoni, ma non ideali per me. Voglio una soluzione semplice. Non voglio codificare in modo rigido le informazioni sul percorso in tutti i miei file componenti. Non voglio installare più pacchetti npm per prenderti cura di questo.

    Quindi vengo un’alternativa più semplice. Non è una risposta diretta a questa domanda, ma funziona molto bene per me.

    Ho appena regolato le impostazioni del mio spazio di lavoro in modo che i file js in /app non /app visualizzati. Sono ancora lì. Sono appena nascosti dal mio spazio di lavoro. Per me, è abbastanza.

    Sto usando Sublime Text, quindi ecco quello che ho per le mie impostazioni di progetto:

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

    Sono sicuro che molti altri editor hanno funzioni simili.

    AGGIORNARE:

    Basta usare la CLI angular. Tutto è gestito automaticamente.

    Per Angular 4 con file di avvio rapido, tutto ciò che dovevo fare era il seguente (un mix delle risposte precedentemente dichiarate ma leggermente diversi):

    • In tsconfig.json (aggiungi): "outDir": "../dist"
    • In bs-config.json (cambia): "baseDir": ["dist", "src"],
    • In bs-config.e2e.json (cambia): "baseDir": ["dist", "src"],

    Nessuna modifica a systemjs.config.js.

    Ho provato il suggerimento di @raheel e ha funzionato per me. Ho modificato la struttura in base alle mie esigenze.

    Sto usando la seguente struttura

    Sto usando la seguente struttura

    Per ottenere questo ho modificato solo due file 1. systemjs.config.js e 2.tsconfig.json

    In systemjs.config.js ho cambiato

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

    systemjs.config.js

    e in tsconfig.json devo aggiungere "outDir": "app/js"

    tsconfig.json

    Sto lavorando con Angular 2.4. Avevo bisogno di un ulteriore passaggio per farlo funzionare. Si trattava di un aggiornamento di SystemJs come riferimento al file main.js in index.html, da:

    System.import (‘main.js’). Catch (function (err) {console.error (err);});

    a:

    System.import (‘dist / main.js’). Catch (function (err) {console.error (err);});

    Aggiungendo sopra quello che ha detto la ruota. Ho dovuto apportare ulteriori modifiche in index.html per riflettere sull’importazione del file javascript corretto ora.

    Ecco il riassunto dalla mia parte

    tsconfig.json

    Prima

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

    Dopo:

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

    Prima:

     'app': 'app', 

    Dopo:

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

    index.html

    Prima:

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

    Dopo:

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