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

时间：2017-11-18 00:02:21

标签： javascript typescript import ecmascript-6 ecma

我想更好地了解ES6导入功能，我需要你的帮助。

情景

我们假设我的应用程序中有一个经常使用的代码子集，我将所有代码安排到一个文件夹中，以便它们在一起。

现在，在三个单独的文件中，我有类似下面的内容（注意：我使用的是TypeScript，因此示例中的文件名以＆＃39; .ts＆＃39;）结尾：

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或main config / app.php文件）来创建和加载模块。

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

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

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

2 个答案:

答案 0 :(得分：4)

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

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

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

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

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

答案 1 :(得分：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文件。该文件将询问名称，此名称是您将如何引用系统中的包。就我而言，我分配了名称＆＃39;数据结构＆＃39;到测试包。

步骤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文件将告诉您的预处理器在哪里可以找到参考文件。

很棒的工作！现在去做一些很棒的编码！

相关问题
最新问题