如何在前端和后端之间共享TypeScript / JavaScript？

Question

我有一个Node.js / w Angular.js项目的文件夹结构，有一些像这样的文件（来自项目根目录）：

frontend
  frontend-file1.ts
  frontend-file2.ts

backend
  backend-file1.ts
  backend-file2.ts

我使用TypeScript编译器和许多其他gulp插件将其编译成一个类似的build文件夹（注意frontend文件如何放入public ）：

build
  backend-file1.js
  backend-file2.js

  public
    frontend-file1.js
    frontend-file2.js

在源文件夹中，我使用ES6 / TypeScript import语句来导入文件。

示例：backend-file1.ts

import './backend-file2';

情况

我编写了一些应该由后端和前端使用的自定义实用程序函数。 我不想在两个文件夹中重复相同的功能，因为这容易出错并且是双重工作。

我考虑过在frontend和backend文件夹之间的项目根目录下创建一个shared文件夹，但是我无法在浏览器中导入比index.html文件（位于frontend文件夹中）更远的文件。

题

我如何能够编写一次TypeScript文件，并能够在frontend和backend文件夹中import此文件？

Answer 1

我只是像这样构造代码：

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

您可以将所有共享库放入shared目录，然后从服务器或客户端源文件导入/要求它们：

import '../shared/library'

Answer 2

为了扩展已经给出的outFile案例的答案，我将展示我处理类共享的方式，以防你不能或不想使用webpack / browserify / outFile选项。

结构看起来很相似

-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

我们的想法是如何使用构建结果构建dist文件夹。 我使用gulp任务执行此操作，并且通过使用上面的结构，我可以从公共库重用服务器和客户端组件。

注意。 要在客户端工作，请不要忘记在index.html中为systemjs设置基本URL：

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

    System.defaultJSExtensions = true;

希望这可以帮助。