Làm cách nào để tôi có thể yêu cầu trình biên dịch Typecript xuất js đã biên dịch sang một thư mục khác?

Tôi còn khá mới với TypeScript và ngay bây giờ tôi có các tệp .ts ở một số nơi đã xem xét kỹ cấu trúc dự án của tôi:

app/
 |-scripts/
    |-app.ts
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  
    |-otherStuff/
       |-otherstuffA.ts

Ngay bây giờ, khi các tệp của tôi được biên dịch, chúng được biên dịch vào cùng một thư mục mà tệp .ts bùi trong:

app/
 |-scripts/
    |-app.ts
    |-app.js
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  |-classA.js
    |  |-classB.js
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  |-controllerA.js
    |  |-controllerB.js
    |  
    |-otherStuff/
       |-otherstuffA.ts
       |-otherStuffA.js

Mặc dù tôi thích cách các tệp .js giữ cùng cấu trúc thư mục như các tệp .ts, nhưng tôi không muốn theo dõi các tệp .js trong VCS của mình, vì vậy tôi muốn giữ tất cả các tệp JavaScript của mình trong một cây thư mục riêng biệt (sau đó tôi có thể thêm vào .gitignore), như sau:

app/
 |-scripts/
 |  |-app.ts
 |  |
 |  |-classes/
 |  |  |-classA.ts
 |  |  |-classB.ts
 |  |  
 |  |-controllers/
 |  |  |-controllerA.ts
 |  |  |-controllerB.ts
 |  |  
 |  |-otherStuff/
 |     |-otherstuffA.ts
 |
 |-js/
    |-app.js
    |
    |-classes/
    |  |-classA.js
    |  |-classB.js
    |
    |-controllers/
    |  |-controllerA.js
    |  |-controllerB.js
    |
    |-otherStuff/
       |-otherstuffA.js

Có cài đặt hoặc tùy chọn nào đó sẽ yêu cầu trình biên dịch TypeScript thực hiện điều này không? Ngoài ra, tôi không chắc liệu nó có liên quan hay không, nhưng tôi đang sử dụng WebStorm.

Sử dụng tùy chọn --outDirtrên tsc (được định cấu hình trong Trình xem tệp trong IntelliJ)

Từ tài liệu dòng lệnh

--outDir DIRECTORY Redirect output structure to the directory.

Biên tập

Kể từ Typecript 1.5, điều này cũng có thể được đặt trong tsconfig.jsontệp:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...

Hoặc thêm "outDir": "build"vào tệp tsconfig.json

Mặc dù những câu trả lời này đúng, bạn nên cân nhắc xem liệu bạn có thực sự muốn ẩn tệp .js khỏi IDE của mình hay không .

Trong Visual Studio Code, hãy truy cập File > Preferences > Settingshoặc .vscode\settings.jsontệp của bạn và nhập:

"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js" : {
        "when": "$(basename).ts"
    },
    "**/*.js.map": {
        "when": "$(basename)"
    }
}

Ở trên ẩn các tệp .js có tệp .ts tương ứng tồn tại.

Nếu bạn muốn ánh xạ cấu trúc thư mục của thư mục app / scripts trong js, tôi khuyên bạn nên sử dụng các cài đặt sau cho trình xem tệp của bạn:

Arguments: --sourcemap --outDir $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$ $FileName$
Working Directory: $FileDir$
Output Paths To Refresh: $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js:$ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js.map

Người dùng Intellij, biên dịch các phân loại thành nhiều thư mục đầu ra

Đối với người dùng Intellij, điều này có thể hữu ích. Đây là cách tôi làm việc này bằng cách sử dụng Trình biên dịch Typecript được tích hợp sẵn.

Thông tin môi trường

• Windows 7
• Chỉ định kiểu sử dụng NPM Phiên bản 1.7.3
• Intellij 14
• ES6
• Sử dụng RequestJS

Cấu trúc thư mục mẫu

BEFORE COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts
   -> plugins
      -> somePlugin.ts

AFTER COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
      -> main.js
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
      somePlugin.ts
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts    //this is where I kept my definition files
   -> plugins
      -> somePlugin.ts

Thiết lập Intellij

• Tệp -> Cài đặt -> Chỉ định loại
• Trình thông dịch nút: Đường dẫn cài đặt NodeJS của bạn
• Phiên bản trình biên dịch: thường được đặt tại C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Tùy chọn dòng lệnh: -m amd -t ES6 -outDir E:\myapp\js
• Chỉ kiểm tra biên dịch tệp chính và trỏ nó vào tệp mục nhập của bạn. E:\myapp\ts\main.tsNếu điều này không được chọn thì tất cả các tệp của bạn sẽ cố gắng xuất ra đường dẫn outDir của bạn.

Tôi thiết lập package.json như thế này để việc nhập npm run startxuất mọi thứ build. Các tệp nguồn được lưu trong src. Outfile được chỉ định bởi --outDir build.

{
  "name": "myapp",
  "version": "0.0.1",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w --outDir build",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "private",
  "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"
  }
}

Bạn có thể loại trừ thư mục xây dựng của mình trong tsconfig.json, mặc dù nó có thể không cần thiết, vì chỉ có JS ở đó:

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

Tôi đang sử dụng Atom với phần mở rộng nguyên tử-typecript và tsconfig.json của tôi trông như thế này:

{
  "compilerOptions": {
    "outDir":"js"
  }
}

Về Grunt, hiện tại để lưu cấu trúc dự án thư mục nhà phát triển của bạn trong sản xuất và không nhận được kết quả không mong muốn sau khi các tệp được biên dịch, vui lòng tham khảo tùy chọn:

compilerOptions: { 
 rootDir: 'devFolder'
 // ...
}

Xem tùy chọn rootDir trong tài liệu chính thức của grunt-ts.

Tôi hy vọng nó sẽ giúp ích cho ai đó nếu họ gặp khó khăn và nhận được kết quả kỳ lạ trong quá trình sản xuất.