Javascript 如何将ES6导入函数与源文件的符号路径一起使用？

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

情景 让我们假设我的应用程序中有一个经常使用的代码子集，我将所有这些代码排列到一个文件夹中，以便将它们放在一起

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

文件0.ts：

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

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

文件1.ts：

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

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

文件2.ts：

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

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

我的希望 我希望我能整理一下这些参考资料，比如：

文件0.ts：

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

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

文件1.ts：

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

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

文件2.ts：

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

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

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

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

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

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

如何在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:string是如何在源代码前面加上前缀的。然后，我设计了一个单元测试，使用我指定的名称从这个目录加载一个文件

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与之类似，只是它告诉测试系统应该只关注这一个测试，而忽略所有其他测试

如何使用npm实现这一点 要实现此本地包参考设置，必须按顺序执行以下几项操作

步骤1：使用npm init创建包 导航到终端中的子文件夹并键入npm init这假设您已经在使用npm，就像我一样

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

步骤2：使用npm intall-save[pathToLocalFile]安装子包 从应用程序的根目录（保存整个应用程序的package.json文件的文件夹）中，找到新文件夹的相对路径。在我的例子中，是src/app/medface/data结构

如果相对路径正确，则应该能够使用ls或dir在[relativePath]/package.json linux/mac或[relativePath]\package.json窗口显示文件

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

你会看到npm做它的事情。如果出现错误，请阅读错误并返回步骤1。当我第一次运行它时，我遇到了一个错误，意识到我必须在目录中使用npminit才能安装它

注意：对于终端命令选项，可以使用npm安装-S[relativePath]——它与上面的命令相同

步骤3：在代码中使用新的包名。 现在它已经安装好了，您可以在代码中的任何地方使用指定的名称，package.json文件将告诉预处理器在哪里可以找到参考文件

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

如何在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:string是如何在源代码前面加上前缀的。然后，我设计了一个单元测试，使用我指定的名称从这个目录加载一个文件

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与之类似，只是它告诉测试系统应该只关注这一个测试，而忽略所有其他测试

如何使用npm实现这一点 要实现此本地包，请使用r 参考设置，必须按顺序发生几件事情

步骤1：使用npm init创建包 导航到终端中的子文件夹并键入npm init这假设您已经在使用npm，就像我一样

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

步骤2：使用npm intall-save[pathToLocalFile]安装子包 从应用程序的根目录（保存整个应用程序的package.json文件的文件夹）中，找到新文件夹的相对路径。在我的例子中，是src/app/medface/data结构

如果相对路径正确，则应该能够使用ls或dir在[relativePath]/package.json linux/mac或[relativePath]\package.json窗口显示文件

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

你会看到npm做它的事情。如果出现错误，请阅读错误并返回步骤1。当我第一次运行它时，我遇到了一个错误，意识到我必须在目录中使用npminit才能安装它

注意：对于终端命令选项，可以使用npm安装-S[relativePath]——它与上面的命令相同

步骤3：在代码中使用新的包名。 现在它已经安装好了，您可以在代码中的任何地方使用指定的名称，package.json文件将告诉预处理器在哪里可以找到参考文件

---

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

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

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

Webpack允许为路径别名指定配置条目。 同样的事情也可以通过使用

NPM允许在不需要存储库的情况下进行指定。还有许多针对本地NPM存储库的解决方案，例如

---

鉴于有一个TypeScript项目安装了NPM依赖项，并且正在使用Webpack构建，因此列出的任何解决方案都是适用的。

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

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

Webpack允许为路径别名指定配置条目。 同样的事情也可以通过使用

NPM允许在不需要存储库的情况下进行指定。还有许多针对本地NPM存储库的解决方案，例如

---

考虑到有一个TypeScript项目安装了NPM依赖项，并且正在使用Webpack进行构建，任何列出的解决方案都适用。

如何解释模块说明符不属于ECMAScript规范的一部分。它取决于您的环境正在使用的模块加载器。如何解释模块说明符不属于ECMAScript规范的一部分。它取决于您的环境正在使用的模块加载器。