FrontendとBackendの間でTypeScript/JavaScriptを共有するには？

Question

私は（プロジェクトのルートから）のようないくつかのファイルとAngular.jsプロジェクトワット/ Node.jsのためのフォルダ構造を持っている：

私はこれをコンパイルするために、他の多くの gulpのプラグインと一緒に活字体のコンパイラを使用

frontend 
    frontend-file1.ts 
    frontend-file2.ts 

backend 
    backend-file1.ts 
    backend-file2.ts 

そのようなbuildフォルダに（frontendファイルはpublicに置か取得する方法に注意）：ソースフォルダで

build 
    backend-file1.js 
    backend-file2.js 

    public 
    frontend-file1.js 
    frontend-file2.js 

を、私はファイルをインポートするimport文ES6 /活字体を使用しています。

例：バックエンドfile1.ts

import './backend-file2'; 

私はバックエンドとフロントエンドの両方で使用されなければならないいくつかのカスタムユーティリティ関数を書いている状況

。両方のフォルダで同じ機能を繰り返すことは望ましくありません。これは、エラーが発生しやすくなり、二重の作業になります。

私はfrontendとbackendフォルダamongsプロジェクトのルートにsharedフォルダを作成すると考えられてきましたが、私はfrontendフォルダ内にあるファイルindex.html、より一層上がるブラウザでファイルをインポートすることはできません。

質問私は両方frontendとbackendフォルダにこのファイルを一度typescriptファイルを書き込み、importにできるようにすることができるだろうどのように

？

Answer 1

私はちょうどこのようなコードを構造化します：

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

あなたは、インポート/サーバーまたはクライアントのソースファイルからそれらを必要と sharedディレクトリに、すべての共有ライブラリを配置することができます

：

import '../shared/library' 

Answer 2

outFileの場合、既に与えられた答えを拡張するために、webpack/browserify/outFileオプションを使用したくない場合やそうでない場合のクラス共有を扱う方法を示します。

構造は、アイデアは、あなたのビルドの結果とdistのフォルダを構築する方法です

-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 

似ています。私はこれをgulpのタスクで行い、その上に構造を持たせることで、サーバーとクライアントの両方のコンポーネントを共通ライブラリから再利用することができます。

注。クライアント側で動作するには、index.htmlをでsystemjsのセットアップベースURLに忘れないでください：

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

    System.defaultJSExtensions = true; 

は、この情報がお役に立てば幸いです。