1

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

情景

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

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

文件0.ts：

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

文件1.ts：

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

文件2.ts：

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

我的希望

我希望我可以清理这些引用，如下所示：

文件0.ts：

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

文件1.ts：

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

文件2.ts：

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

我尝试过的事情

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

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

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

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

4

2 回答 2

4

该解决方案特定于语言和环境。目前仅使用 ES 模块是不可能解决这个问题的。

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

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

NPM 允许在不需要存储库的情况下指定本地依赖项。本地 NPM 存储库也有许多解决方案，例如sinopia。

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

于 2017-11-18T00:31:06.433 回答
2

如何在 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 文件。该文件将要求一个名称，这个名称是您在系统中引用包的方式。就我而言，我将名称“数据结构”分配给了测试包。

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

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

如果您的相对路径是正确的，那么您应该能够使用ls或dir显示位于 [relativePath]/package.json (linux/mac) 或 [relativePath]\package.json (windows) 的文件

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

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

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

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

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

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

于 2017-11-18T00:23:59.890 回答