Angular2 TypeScript dosyalarını ve JavaScript dosyalarını farklı klasörlere ayırın, belki 'dist'

Aşağıdaki gibi bir dosya yapısı içeren angular.io web sitesinden 5 dakikalık hızlı başlangıcı kullanıyorum :

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

tsconfig.json bunun gibi bir kod bloğudur ：

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

Ayrıca 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'i true'dan false'a değiştiririm, bu nedenle kod düzenleyicide harita dosyası yeniden oluşturulmaz, ancak js dosyası yine de oluşturulur.

Sadece ts dosyası üzerinde çalışmak istiyorum ve js ve js.map dosyası brunch almak istemiyorum, tüm ts dosyalarımı uygulama klasörü ve tüm js ve js gibi normal geliştirme floderime koymak için ne yapmalıyım. dosyaları dist adlı bir klasöre eşleyin?

Buna iyi bir örnek, açısal2-web paketi-hızlı başlangıç ​​olabilir . Ama bunu nasıl yaptıklarını anlamadım?

Bunu nasıl yapacağınıza dair herhangi bir tavsiye, elbette manuel olarak değil.

Teşekkürler,

Muhtemelen geç ama işte iki aşamalı bir çözüm.

Aşama 1

Değişim system.config.js güncelleyerek 'app'için 'dist/app':

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

Şimdi şöyle görünecek:

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

Adım 2

Dist klasörünü oluşturun .

Düzenleme tsconfig.json ve eklenti:

"outDir": "dist"

Ortaya çıkan tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

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

Çalıştırın npm startve dist klasöründeki tüm derlenmiş dosyaları .jsve .map.jsdosyaları görmelisiniz .

Not : Diğer yanıtların üzerinden geçin. Ayrıca oldukça faydalı ve bilgilendiricidirler.

Benim çözümüm yukarıdakinden biraz farklı. Burada tanımlanan Angular2 Hızlı Başlangıç ​​tohumundan başlıyordum: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

Ve sonra yalnızca aşağıdakileri değiştirdi:

• Eklenen "outDir": "../dist"içintsconfig.json
• Değiştirilen baseDirnitelik içi bs-config.jsoniçin"baseDir": ["dist", "src"]

Daha sonra npm run starteskisi gibi çalışır (hatta html / css ve diğer dosyalar kopyalanmadan bile), ancak derlenir .jsve .mapdosyalar dizininizde yerleşiktir dist/appve src/appdizininizi kirletmez .

Lütfen bunun testi nasıl etkilediğini test etmediğimi unutmayın.

Ben de geç kalmış olabilirim ama bunu yaptım.

Önce Raheel Shan dediğini yap .

Ardından dist klasörünü oluşturun.

Klasörü oluşturduktan sonra dosyaya gidin tsconfig.jsonve şunu ekleyin:

"outDir": "dist"

Sonuç 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"
  ]
}

Şimdi çalıştırırsanız npm startve bir dosyaya kaydetme tüm derlenmiş görmelisiniz .jsve .map.jsiçinde dist klasörüne.

Thanx Raheel Shan, cevabın bir başlangıç ​​yaptı

@Adavo'nun yorumlarda yukarıda sorulduğu gibi

Maalesef html / css dosyalarım dist klasöründe mevcut değil. Tüm html / css'leri dist klasörüne kopyalamak için nasıl yapılır?

Bu sorunun cevabı * tüm .ts dosyalarında ve esas olarak @Component'in "templateURL" özelliğinde "/" (kök Dizinden) kullanarak HTML / CSS Dosyasına tam yolu sağlamaktır.

çok zaman sonra - anladım - Gulp kullanmadan çözdüm :) Yipppeee

Maalesef html / css dosyalarım dist klasöründe mevcut değil. Tüm html / css'leri dist klasörüne kopyalamak için nasıl yapılır?

Angular 2'deki göreli yollar o kadar basit değildir çünkü çerçeve , Angular 2'deki Bileşen-Göreli Yollar makalesine göre dosyalarınızı (CommonJs, SystemJs, .. vb.) Yüklediğinizde esnek olmak ister .

Makalede module.idaçıklandığı gibi, CommonJs ile kullanıldığında (tsconfig.json dosyanızı kontrol edin) modülün mutlak kökünü içerir ve göreli bir yol oluşturmak için kullanılabilir.

Bu nedenle daha iyi bir alternatif, css / html dosyalarını ts dosyalarıyla bırakmak ve bileşeninizi aşağıdaki gibi yapılandırmak olabilir, yalnızca derleme dosyalarınızın dist adında ayrı bir klasörde olduğunu varsayarsak . Bu şekilde css ve html dosyalarınız ile yüklenecektir. Türetilmiş yapı yolunu onları içeren kaynağa dönüştürerek göreli yolları kullanmakta sorun yok - esasen /dist/onu kaldırarak veya yeniden adlandırarak /src/;)

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

kaynak ve derleme için ayrı klasörleriniz varsa, bunun yerine bunu yapabilirsiniz:

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

Yani, bunu çözmek için:

Maalesef html / css dosyalarım dist klasöründe mevcut değil. Tüm html / css'leri dist klasörüne kopyalamak için nasıl yapılır?

Hem @raheel shan hem de @ Lirianer'in yanıtlarındaki adımları uygulayın. ... o zaman bununla bitirebilirsin.

Bunu npm betikleri kullanarak kendi amaçlarım için çözdüm. Package.json dosyamdaki komut dosyaları bölümü aşağıdadır. Çözüm, sunucu ile aynı anda onchnage(bir npm paketi - npm install --save onchange) çalıştırmaktır tsc. Ardından taşımak istediğiniz varlıkları kopyalamak için rsync kullanın:

"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 kullananlarınız için, cwRsync gibi paketlenmiş çözümler rsyncaracılığıyla Cygwinveya bunlarla alabilirsiniz .

@ WillyC'nin önerisini denedim ve bir cazibe gibi çalıştım, sadece dosyanıza onchangebağımlılık eklemeniz gerekeceğini unutmayın package.json. İlk çalıştırmada temiz bir kuruluma sahip olmak ve ayrıca kalan html / css dosyalarını kaldırmak için biraz fazladan komut dosyası ekledim (aynısı TSC için de yapılabilseydi güzel olurdu)

Neyse, işte bir bölümdür package.jsondosyası

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

İçin rsyncsilme fark --deleteüzerinde bayrak rsynckomutası watchassetssenaryo

Angular2 TypeScript dosyaları ve JavaScript dosyaları farklı bir klasöre

İşte Angular 2 için en son sürüm V2.1.1 için yapılandırmam ve çok iyi çalışıyor!

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'den ilham alarak kendi yöntemimi geliştirdim ve paylaşmaya değer olduğuna inanıyorum:

1) cpx'i yükleyin

npm install cpx

2) bs-config.json'u güncelleyin ve baseDir'i "src" yerine "dist" olarak değiştirin

"baseDir":"dist"

3) tsconfig.json dosyasını güncelleyin ve compilerOptions'ın sonuna outDir ekleyin:

"outDir": "../dist"

4) Update package.json: 4.1) komut dosyalarının sonuna yeni bir komut ekleyin:

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

4.2) "başlangıç" satırını "cpx" komutunu içerecek şekilde değiştirin:

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

Sen transpile edebilir .ts, tıpkı tarayıcıda dosyaları plunker kendi açısal 2 ts şablonda yapıyor.

Sadece düzenleyiciyi başlatın, yeni, ardından AngularJS ve 2.0.x (TS) seçeneğini seçin (en altta). Ancak webpack'i (veya başka bir paket oluşturma aracını) kullanmanın amacı, dosyaları yerel olarak aktarmaktır.

Yukarıda belirtilen seçeneklerden birkaç denenmiş ve son olarak, bu şimdiye yerleşmiş budur: Peep - Bir uzantı için Visual Studio Code.

Nasıl kurulur:

• Görünüm -> Uzantılar
• Dikizlemek
• Yüklemek
• Tekrar yükle
• Görünüm -> Komut Paleti
• Peep Yok
• .vscode / settings.json'u gerektiği gibi değiştirin (benimki aşağıda gösterilmiştir)

-

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

01/25/2017 - güncellemeler: kutudan çıkar çıkmaz açısal cli , bununla ilgilenir. ve kurulum işleri ve şimdi.

Burada listelenen çözümleri denedim. İyiler ama benim için ideal değiller. Basit bir çözüm istiyorum. Tüm bileşen dosyalarımdaki yol bilgilerini sabit kodlamak istemiyorum. Bununla ilgilenmek için daha fazla npm paketi kurmak istemiyorum.

Bu yüzden en kolay alternatif buluyorum. Bu sorunun doğrudan cevabı değil ama benim için çok işe yarıyor.

Çalışma alanı ayarlarımı, jsaltındaki dosyalar /appgörünmeyecek şekilde değiştiriyorum. Hala oradalar. Sadece çalışma alanımdan gizlenmişler. Bana göre bu kadar yeter.

Sublime Text kullanıyorum, işte proje ayarlarım için sahip olduğum şeyler:

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

Eminim diğer birçok editörün de benzer işlevleri vardır.

GÜNCELLEME:

Sadece Angular CLI kullanın. Her şey otomatik olarak halledilir.

Hızlı başlangıç ​​dosyalarına sahip Angular 4 için tek yapmam gereken şuydu (önceden belirtilen yanıtların bir karışımı ancak biraz farklı değerler):

• Tsconfig.json içinde (ekle): "outDir": "../dist"
• Bs-config.json'da (değiştir): "baseDir": ["dist", "src"],
• Bs-config.e2e.json'da (değiştir): "baseDir": ["dist", "src"],

Systemjs.config.js'de değişiklik yok.

@Raheel'in önerisini denedim ve benim için çalıştı. Yapıyı ihtiyaçlarıma göre değiştirdim.

Aşağıdaki yapıyı kullanıyorum

Bunu elde etmek için sadece iki dosyayı değiştirdim 1. systemjs.config.js ve 2.tsconfig.json

Systemjs.config.js'de değiştirdim

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

ve tsconfig.json dosyasına eklemem gerekiyor "outDir": "app/js"

Angular 2.4 ile çalışıyorum. Çalışması için fazladan bir adıma ihtiyacım vardı. Bu, index.html'deki main.js dosyasına sistemJs referansını güncelliyordu.

System.import ('main.js'). Catch (işlev (hata) {console.error (hata);});

to:

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

Raheel Shan'ın söylediklerinin üstüne ekleyerek. Şimdi doğru javascript dosyasını içe aktarmak için index.html'de ek değişiklik yapmam gerekiyordu.

İşte benim tarafımdan özet.

tsconfig.json

Önce

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

Sonra:

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

Önce:

'app': 'app',

Sonra:

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

index.html

Önce:

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

Sonra:

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