angularjs - Bagaimana cara berbagi TypeScript/JavaScript antara Frontend dan Backend?

Saya memiliki struktur folder untuk proyek Node.js /w Angular.js dengan beberapa file seperti berikut (dari root proyek):

frontend
  frontend-file1.ts
  frontend-file2.ts

backend
  backend-file1.ts
  backend-file2.ts

Saya menggunakan compiler TypeScript bersama dengan banyak plugin gulp lainnya untuk mengompilasi ini menjadi folder build seperti ini (perhatikan bagaimana file frontend ditempatkan ke dalam public):

build
  backend-file1.js
  backend-file2.js

  public
    frontend-file1.js
    frontend-file2.js

Di folder sumber, saya menggunakan pernyataan import ES6/TypeScript untuk mengimpor file.

Contoh: backend-file1.ts

import './backend-file2';

Situasi

Saya telah menulis beberapa fungsi utilitas kustom yang seharusnya digunakan oleh backend dan frontend. Saya tidak ingin mengulang fungsi yang sama di kedua folder, karena ini rawan kesalahan dan merupakan pekerjaan ganda.

Saya telah mempertimbangkan untuk membuat folder shared di root proyek di antara folder frontend dan backend, tetapi saya tidak bisa mengimpor file di browser yang berada di atas file index.html, yang ada di folder frontend.

Pertanyaan

Bagaimana saya bisa menulis file TypeScript sekali dan dapat import file ini di kedua folder frontend dan backend?

Jawaban #1

Saya akan menstrukturkan kode seperti ini:

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

Anda dapat menempatkan semua pustaka bersama Anda ke dalam direktori shared lalu mengimpor/memintanya dari berkas sumber server atau klien Anda:

import '../shared/library'

Jawaban #2

Untuk memperluas jawaban yang sudah diberikan untuk kasus outFile, saya akan menunjukkan cara saya menangani berbagi kelas apabila Anda tidak bisa atau tidak ingin menggunakan opsi webpack/browserify/outFile.

Strukturnya terlihat mirip

-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

Idenya adalah bagaimana Anda membangun folder dist dengan hasil build Anda. Saya melakukan ini dengan tugas-tugas gulp dan dengan memiliki struktur di atas, itu memungkinkan saya untuk menggunakan kembali komponen baik di sisi server maupun klien dari pustaka umum.

Catatan. Untuk bekerja di sisi klien, jangan lupa untuk mengatur base URL untuk systemjs di index.html:

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

    System.defaultJSExtensions = true;

Semoga ini membantu.

Artikel terkait