Tách các tệp Angular2 TypeScript và các tệp JavaScript thành các thư mục khác nhau, có thể là 'dist'

Tôi đang sử dụng khởi động nhanh 5 phút từ trang web angle.io, có cấu trúc tệp như sau:

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

tsconfig.json là một khối mã như thế này ：

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

Ngoài ra 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"
  }
}

Tôi thay đổi sourceMap từ true thành false, vì vậy trong trình chỉnh sửa mã, tệp bản đồ không được tạo lại, nhưng tệp js vẫn được tạo.

Tôi chỉ muốn làm việc trên tệp ts và không muốn nhận một loạt các tệp js và js.map, tôi nên làm gì để đặt tất cả các tệp ts của mình trong bộ phát triển thông thường như thư mục ứng dụng và tất cả js và js. ánh xạ các tập tin vào một thư mục được gọi là dist?

Một ví dụ điển hình về điều này có thể là angle2-webpack-quickstart . Nhưng tôi không tìm ra cách họ làm điều đó?

Bất kỳ lời khuyên làm thế nào để làm điều đó, tất nhiên không phải là thủ công.

Cảm ơn,

Có lẽ là muộn nhưng đây là một giải pháp hai bước.

Bước 1

Thay đổi system.config.js bằng cách cập nhật 'app'thành 'dist/app':

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

Bây giờ nó sẽ như thế này:

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

Bước 2

Tạo thư mục dist .

Chỉnh sửa tsconfig.json và thêm:

"outDir": "dist"

Kết quả tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

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

Chạy npm startvà bạn sẽ thấy tất cả các tệp .jsvà .map.jstệp đã biên dịch trong thư mục dist .

Lưu ý : Chuyển qua các câu trả lời khác. Chúng cũng khá hữu ích và nhiều thông tin.

Giải pháp của tôi hơi khác so với giải pháp trên. Tôi đã bắt đầu từ hạt giống Angular2 Quickstart được xác định tại đây: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

Và sau đó chỉ thay đổi những điều sau:

• thêm "outDir": "../dist"vàotsconfig.json
• Đã thay đổi baseDirthuộc tính bên trong bs-config.jsonthành"baseDir": ["dist", "src"]

Sau đó npm run starthoạt động như trước (ngay cả html / css và các tệp khác mà không cần bất kỳ bản sao nào), nhưng các tệp được biên dịch .jsvà tích .maphợp sẵn dist/appvà sẽ không gây ô nhiễm src/appthư mục của bạn .

Xin lưu ý rằng tôi chưa thử nghiệm xem điều này ảnh hưởng như thế nào đến thử nghiệm.

Tôi cũng có thể đến muộn nhưng tôi đã làm điều này.

Đầu tiên hãy làm những gì raheel shan đã nói .

Sau đó tạo thư mục dist .

Sau khi tạo thư mục, hãy chuyển đến tệp tsconfig.jsonvà thêm tệp này:

"outDir": "dist"

Kết quả 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"
  ]
}

Nếu bây giờ bạn chạy npm startvà lưu một tệp, bạn sẽ thấy tất cả tệp đã biên dịch .jsvà .map.jstrong thư mục dist .

Thanx raheel shan, câu trả lời của bạn đã khởi đầu tốt đẹp,

Như @Adavo đã hỏi đúng ở trên trong nhận xét

Rất tiếc, các tệp html / css của tôi không có trong thư mục dist. Làm thế nào để sao chép tất cả html / css trong thư mục dist?

Câu trả lời cho câu hỏi này là * cung cấp đường dẫn đầy đủ đến Tệp HTML / CSS bằng cách sử dụng '/' (từ Thư mục gốc) trong tất cả các Tệp .ts và chủ yếu trong thuộc tính "templateURL" của @Component

sau rất nhiều thời gian - tôi đã tìm ra nó - mà không cần sử dụng Gulp :) Yipppeee

Rất tiếc, các tệp html / css của tôi không có trong thư mục dist. Làm thế nào để sao chép tất cả html / css trong thư mục dist?

Các đường dẫn tương đối trong Angular 2 không đơn giản như vậy vì khung công tác muốn linh hoạt với cách bạn tải tệp của mình (CommonJs, SystemJs, .. vv) theo bài viết Component-Relative Paths trong Angular 2 .

Như bài viết giải thích module.idkhi được sử dụng với CommonJs (kiểm tra tsconfig.json của bạn) có chứa gốc tuyệt đối của mô-đun và nó có thể được sử dụng để tạo một đường dẫn tương đối.

Vì vậy, một giải pháp thay thế tốt hơn có thể là để các tệp css / html với các tệp ts và định cấu hình thành phần của bạn như bên dưới, giả sử bạn chỉ có các tệp xây dựng của mình trong một thư mục riêng có tên là dist .. Bằng cách này, các tệp css và html của bạn sẽ được tải bằng không có vấn đề gì khi sử dụng các đường dẫn tương đối bằng cách chuyển đổi đường dẫn bản dựng dẫn xuất thành đường dẫn nguồn chứa chúng - về cơ bản là xóa /dist/hoặc đổi tên nó thành /src/;)

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

nếu bạn có các thư mục riêng biệt cho nguồn và bản dựng, bạn có thể thực hiện việc này thay thế:

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

Vì vậy, để giải quyết điều này:

Rất tiếc, các tệp html / css của tôi không có trong thư mục dist. Làm thế nào để sao chép tất cả html / css trong thư mục dist?

Thực hiện các bước trong cả câu trả lời của @raheel shan và @ Lirianer. ... thì bạn có thể kết thúc nó với cái này.

Tôi đã giải quyết điều này cho mục đích của mình bằng cách sử dụng các tập lệnh npm. Phần script trong tệp package.json của tôi ở bên dưới. Giải pháp là chạy onchnage(một gói npm - npm install --save onchange) đồng thời với tscvà máy chủ. Sau đó, sử dụng rsync để sao chép nội dung bạn muốn di chuyể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/"
}

Đối với những người sử dụng Windows, bạn có thể nhận được rsyncthông qua Cygwinhoặc bằng các giải pháp đóng gói như cwRsync .

Tôi đã thử gợi ý của @WillyC và hoạt động như một sự quyến rũ, chỉ cần lưu ý rằng bạn sẽ phải thêm phần onchangephụ thuộc vào package.jsontệp của mình . Tôi đã thêm một chút chỉ một chút tập lệnh bổ sung để có một thiết lập sạch sẽ khi chạy lần đầu tiên và cũng để xóa các tệp html / css còn sót lại (sẽ rất tốt nếu TSC có thể thực hiện điều tương tự)

Dù sao, đây là một phần trong package.jsontệp của tôi

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

Để rsyncxóa, hãy chú ý --deletecờ trên rsynclệnh của watchassetsscript

Các tệp Angular2 TypeScript và các tệp JavaScript vào thư mục khác nhau

Đây là cấu hình của tôi cho Angular 2 phiên bản mới nhất V2.1.1 và nó hoạt động rất tốt!

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

Lấy cảm hứng từ @Nagyl, tôi đã phát triển theo cách riêng của mình và tôi tin rằng điều đó đáng để chia sẻ:

1) Cài đặt cpx

npm install cpx

2) Cập nhật bs-config.json và thay đổi baseDir từ "src" thành "dist"

"baseDir":"dist"

3) Cập nhật tsconfig.json và thêm outDir vào cuối trình biên dịch

"outDir": "../dist"

4) Cập nhật package.json: 4.1) thêm một lệnh mới vào cuối các tập lệnh:

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

4.2) sửa đổi dòng "bắt đầu" để bao gồm lệnh "cpx":

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

Bạn có thể chuyển .tstệp trong trình duyệt, giống như plunker đang làm trong mẫu 2 ts góc cạnh của họ.

Chỉ cần khởi chạy trình chỉnh sửa, chọn mới, sau đó chọn AngularJS và 2.0.x (TS) (ở dưới cùng). Nhưng toàn bộ điểm của việc sử dụng webpack (hoặc bất kỳ công cụ gói nào khác) là truyền tải các tệp cục bộ.

Tôi đã thử một số tùy chọn được đề cập ở trên và cuối cùng, đây là những gì tôi đã giải quyết: Peep - một tiện ích mở rộng cho Visual Studio Code.

Cài đặt thế nào:

• Xem -> Tiện ích mở rộng
• Nhìn trộm
• Tải về
• Nạp lại
• View -> Command Pallet
• Nhìn trộm Không có
• sửa đổi .vscode / settings.json theo yêu cầu (của tôi được hiển thị bên dưới)

-

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

25/01/2017 - cập nhật: angle-cli ra khỏi hộp, chăm sóc điều này. và cài đặt hoạt động và bây giờ.

Tôi đã thử các giải pháp được liệt kê ở đây. Họ tốt, nhưng không lý tưởng đối với tôi. Tôi muốn một giải pháp đơn giản. Tôi không muốn mã hóa thông tin đường dẫn trong tất cả các tệp thành phần của mình. Tôi không muốn cài đặt thêm gói npm để xử lý việc này.

Vì vậy, tôi đưa ra một giải pháp thay thế dễ dàng nhất. Nó không phải là câu trả lời trực tiếp cho câu hỏi này, nhưng nó hoạt động rất tốt đối với tôi.

Tôi chỉ chỉnh sửa cài đặt không gian làm việc của mình để các jstệp bên dưới /appkhông hiển thị. Họ vẫn ở đó. Chúng chỉ bị ẩn khỏi không gian làm việc của tôi. Với tôi, vậy là đủ.

Tôi đang sử dụng Sublime Text, vì vậy đây là những gì tôi có cho cài đặt dự án của mình:

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

Tôi chắc rằng nhiều trình soạn thảo khác có chức năng tương tự.

CẬP NHẬT:

Chỉ cần sử dụng Angular CLI. Mọi thứ được chăm sóc tự động.

Đối với Angular 4 với các tệp từ khởi động nhanh, tất cả những gì tôi phải làm là như sau (kết hợp các câu trả lời đã nêu trước đó nhưng các giá trị hơi khác nhau):

• Trong tsconfig.json (thêm): "outDir": "../dist"
• Trong bs-config.json (thay đổi): "baseDir": ["dist", "src"],
• Trong bs-config.e2e.json (thay đổi): "baseDir": ["dist", "src"],

Không thay đổi đối với systemjs.config.js.

Tôi đã thử đề xuất của @raheel và nó phù hợp với tôi. Tôi đã sửa đổi cấu trúc theo nhu cầu của tôi.

Tôi đang sử dụng cấu trúc sau

Để có được điều này, tôi chỉ sửa đổi hai tệp 1. systemjs.config.js và 2.tsconfig.json

Trong systemjs.config.js, tôi đã đổi thành

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

và trong tsconfig.json tôi phải thêm "outDir": "app/js"

Tôi đang làm việc với Angular 2.4. Tôi cần thêm một bước để làm cho nó hoạt động. Đây là bản cập nhật systemJs tham chiếu đến tệp main.js trong index.html nó, từ:

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

đến:

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

Thêm vào đầu những gì raheel shan nói. Tôi đã phải thực hiện thay đổi bổ sung trong index.html để phản ánh để nhập tệp javascript chính xác ngay bây giờ.

Đây là tóm tắt từ phía tôi.

tsconfig.json

Trước

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

Sau:

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

Trước:

'app': 'app',

Sau:

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

index.html

Trước:

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

Sau:

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