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

【问题标题】：How to share TypeScript/JavaScript between Frontend and Backend?如何在前端和后端之间共享 TypeScript/JavaScript？
【发布时间】：2016-07-31 20:20:01
【问题描述】：

我有一个 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 这个文件？

【问题讨论】：

标签： javascript angularjs node.js typescript gulp

【解决方案1】：

我会像这样构造代码：

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

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

import '../shared/library'

【讨论】：

感谢您的回答@lxe。但是，问题仍然存在，因为从client 中的index.html 文件，我将无法将文件导入到“超越根目录”，即client 文件夹。我将无法从shared 访问脚本。我想我可以考虑将shared 文件夹编译到构建中的前端和后端文件夹中？你怎么看？
@Nicky 假设您正在通过 --out bundle.js 将客户端脚本编译到单个文件中，这使得源导入的位置无关紧要。
我明白了，我这样做了，但仅限于生产。对于开发，编译文件夹中的每个文件都是一个：一个。对这种情况有什么建议吗？

【解决方案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;

希望这会有所帮助。

【讨论】：

【解决方案3】：

我想分享我所做的事情，以便其他人有同样的选择。我觉得其他更简洁的选项需要更多的工作，由于这是一个个人项目，我以更简单但更粗略的方式设置它。

基本上我想使用符号链接，这样我就可以从任一位置编辑它而不会出现问题，也不会对当前项目结构进行太多更改。我也很幸运，我不需要为此支持 Windows。

我已经在fe 文件夹和be 中拥有一个带有 React 应用程序的单一存储库，两者都使用 TypeScript。这是我生成的文件夹设置：

be/
  src/
    shared -> ../../fe/src/shared
fe/
  src/
    shared/

我会注意到 React 不支持符号链接（IIRC 这是因为 webpack 不支持符号链接），所以“真实”文件夹应该在前端。

我还希望它在没有手动设置的情况下工作，所以我在package.json 中制作了一个额外的脚本，以确保符号链接已经设置。如果符号链接已经存在，它还会创建一个损坏的符号链接，但同样，这是针对个人项目的，我可以接受。（如果有人比我更了解ln，很高兴更新它。）在后端的package.json：

"prebuild": "ln -f -s ../../fe/src/shared src/shared",
"build": "tsc",

【讨论】：