如何使用 ES6 导入函数和源文件的符号路径？

Question

我正在尝试更好地理解 ES6 导入功能，我需要你的帮助。

情景

假设我的应用程序中有一个经常使用的代码子集，我将所有这些代码整理到一个文件夹中，这样它们就在一起了。

所以现在，在三个单独的文件中，我有如下内容（注意：我使用的是 TypeScript，因此示例中的文件名以“.ts”结尾）：

file0.ts:

import {AbstractCoreCommunicationClass} from '../../../core-packages/communication/abstract-core-communication'

file1.ts:

import {AbstractCoreCommunicationClass} from '../communication/abstract-core-communication'

file2.ts:

import {AbstractCoreCommunicationClass} from '../../../../../core-packages/communication/abstract-core-communication'

我的希望

我希望我可以清理这些对类似内容的引用：

file0.ts:

import {AbstractCoreCommunicationClass} from '@my-communication-core/abstract-core-communication'

file1.ts:

import {AbstractCoreCommunicationClass} from '@my-communication-core/abstract-core-communication'

file2.ts:

import {AbstractCoreCommunicationClass} from '@my-communication-core/abstract-core-communication'

我尝试过的事情

我知道在 Laravel（一个不同的框架）中，可以通过编辑一个核心加载器定义文件（如 composer.json 或主 config/app.php 文件）来创建和加载模块。

我已经在 package.json 文件中寻找了一种类似的协议来引用非 npm 包，但我没有找到任何此类信息。我找到的最接近的信息是一个教程，其中 NPM 解释了如何使用 NPM 私有包，只要我想在余生中每月支付 7 美元将我的包托管在他们的服务器。

一定有办法在本地处理这种包管理，但我还没有发现它是什么，这就是为什么我需要你的帮助！

感谢所有帮助。没有错误的答案。有时即使是一个糟糕的答案也能为我指明正确的方向，所以请给我你的想法，让我们一起解决这个问题，让每个人都能受益！

Answer 1

如何在 NPM 中使用本地包

事实证明，NPM 有一个功能可以让我做我需要做的事情。写完上面的问题后，我重新阅读了 package.json 文档，发现 NPM 现在允许本地文件目录引用包。

它在 pacakge.json 中的样子

我使用 npm 创建链接（请参阅下一节），然后检查 package.json 文件以找到以下内容：

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    //###THIS IS MY NEW LINE###
    "data-structures": "file:src/app/medface/data-structures",
    "intl": "^1.2.5",
    "ng2-cookies": "^1.0.12",
    "rxjs": "^5.1.0",
    "showdown": "^1.8.0",
    "to-markdown": "^3.1.0",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.4"
  },

注意file: 字符串是如何添加源的。然后我设计了一个单元测试，以使用我指定的名称从该目录加载其中一个文件。

import {VisitDataStructure} from 'data-structures/visit';

describe( "The data structure package", ()=>{
    fit("loads without failure and allows the user to import classes within the folder.", ()=>{
        let visit = new VisitDataStructure();
        expect(visit).not.toBeNull();
    } );
} );

测试运行良好！

（注意：函数fit 和it 一样，只是它告诉测试系统它应该只“关注”一个测试，而忽略所有其他测试。）

如何使用 npm 实现这一目标

要实现此本地包引用设置，必须按顺序执行几件事。

第 1 步：使用npm init 创建一个包

导航到终端中的子文件夹并输入npm init（这假设您已经在使用 npm，就像我一样）。

按照屏幕上的提示创建您的 package.json 文件。该文件将要求一个名称，这个名称是您在系统中引用包的方式。就我而言，我将名称“数据结构”分配给了测试包。

第二步：使用npm intall --save [pathToLocalFile]安装子包

从应用程序的根目录，即保存整个应用程序的 package.json 文件的同一文件夹，找到新文件夹的相对路径。就我而言，它是src/app/medface/data-structures。

如果您的相对路径是正确的，那么您应该可以使用ls 或dir 在 [relativePath]/package.json (linux/mac) 或 [relativePath]\package.json 处显示文件（窗户）

然后运行命令npm install --save [relativePath]。

你会看到 npm 做它的事。如果它给您一个错误，请阅读错误并返回到第 1 步。 （当我第一次运行它时，我得到了一个错误，并意识到我必须在目录中使用npm init，然后才能安装它。

注意：对于终端命令替代，是的，您可以使用npm install -S [relativePath] -- 与上述命令相同。

第 3 步：在代码中使用您的新包名称。

现在它已安装，您可以在代码中的任何位置使用您指定的名称，并且 package.json 文件将告诉您的预处理器在哪里可以找到参考文件。

干得好！现在去做一些很棒的编码吧！

Answer 2

解决方案特定于语言和环境。目前无法单独使用 ES 模块解决此问题。

TypeScript 允许为路径别名指定 paths 配置条目。

Webpack 允许为路径别名指定 alias 配置条目。 使用 plugin 可以在 Rollup 中实现相同的目的。

NPM 允许指定 local dependencies 而无需存储库。本地 NPM 存储库也有许多解决方案，例如sinopia.

鉴于有安装 NPM 依赖项并使用 Webpack 构建的 TypeScript 项目，任何列出的解决方案都适用。