angularjs - Làm thế nào để chia sẻ TypeScript/JavaScript giữa Frontend và Backend?

Tôi có một cấu trúc thư mục cho dự án Node.js /với Angular.js với một số tệp như sau (từ thư mục gốc của dự án):

frontend
  frontend-file1.ts
  frontend-file2.ts

backend
  backend-file1.ts
  backend-file2.ts

Tôi sử dụng một trình biên dịch TypeScript cùng với nhiều plugin gulp khác để biên dịch điều này vào một thư mục build như sau (chú ý cách các tệp frontend được đặt vào public):

build
  backend-file1.js
  backend-file2.js

  public
    frontend-file1.js
    frontend-file2.js

Trong các thư mục nguồn, tôi sử dụng các câu lệnh import ES6/TypeScript để nhập các tệp.

Ví dụ: backend-file1.ts

import './backend-file2';

Tình huống

Tôi đã viết một số hàm tiện ích tùy chỉnh mà cả backend và frontend đều nên sử dụng. Tôi không muốn lặp lại cùng một hàm trong cả hai thư mục, vì điều này dễ dẫn đến lỗi và là công việc làm lại.

Tôi đã xem xét việc tạo một thư mục shared ở thư mục gốc của dự án giữa các thư mục frontend và backend, nhưng tôi không thể import các tệp trong trình duyệt mà đi lên cao hơn tệp index.html, nằm trong thư mục frontend.

Câu hỏi

Làm thế nào tôi có thể viết một tệp TypeScript một lần và có thể import tệp này trong cả hai thư mục frontend và backend?

Câu trả lời #1

Tôi sẽ chỉ bố trí cấu trúc mã như thế này:

- src/
   - server/
   - client/
   - shared/

Bạn có thể đặt tất cả các thư viện chia sẻ của mình vào thư mục shared, sau đó import/require chúng từ các tệp nguồn máy chủ hoặc máy khách của bạn:

import '../shared/library'

Câu trả lời #2

Để mở rộng câu trả lời đã được đưa ra cho trường hợp outFile, tôi sẽ trình bày cách của tôi trong việc xử lý việc chia sẻ lớp trong trường hợp bạn không thể hoặc không muốn sử dụng các tùy chọn webpack/browserify/outFile.

Cấu trúc trông giống nhau

-client
    index.html
    app.ts
-server
    service.ts
-common
    helper.ts
-dist
    -client
        -index.html
        -lib
            -client
                app.js
            -common
                helper.js
    -server
        service.js
    -common
        helper.js

Ý tưởng là cách bạn xây dựng thư mục dist với kết quả của quá trình build. Tôi làm điều này bằng các tác vụ gulp và nhờ có cấu trúc trên, nó cho phép tôi tái sử dụng các thành phần cả phía server và client từ thư viện chung.

Lưu ý. Để hoạt động ở phía khách hàng, đừng quên thiết lập URL cơ sở cho systemjs trong index.html:

    System.config({
        baseURL: './lib'
    });

    System.defaultJSExtensions = true;

Hy vọng điều này hữu ích.