为什么我不能使用 SystemJS 直接从 node_modules 导入？

Question

虽然SystemJS上有很多questions and documentation，但我还是不明白导入语法。 具体来说，为什么 typescript 使用此代码找不到 ng-boostrap.js：

import { createPlatform } from '../../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap',

这是直接导入文件，但这段代码有效：

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js';

我的 map 在 systemjs.config.js 中包含以下行：

'@angular/core': 'npm:@angular/core/bundles/core.umd.js'.

为什么我不能使用 systemJS 直接从 node_modules 导入？

Answer 1

注意：虽然下面的解决方案有效，但有些信息不正确。请参阅下面评论中的讨论。

首先，TypeScript 对 JS 文件一无所知。它知道如何生成它们，但不知道如何针对它们进行编译。所以我不确定你是怎么得到的

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js';

在您的 TypeScript 代码中编译。

我们可以做到

import {createPlatform } from '@angular/core';

在 TypeScript 中，因为 TypeScript 已经在 node_modules 中查找。 @angular/core，如果你查看你的 node_module，有目录 @angular/core，有一个 index.d.ts 文件。这是我们的 TypeScript 代码编译所针对的文件，而不是 JS 文件。 JS 文件（上面第一个代码片段中的文件）仅在运行时使用。 TypeScript 应该对该文件一无所知。

使用上面的第二个代码片段，当 TypeScript 被编译成 JS 时，它看起来像

var createPlatform = require('@angular/core').createPlatform;

作为运行时，SystemJS 看到这个，然后查看 map 配置，并将 @angular/core 映射到绝对文件位置，并且能够加载该文件

'@angular/core': 'npm:@angular/core/bundles/core.umd.js'

这是您应该使用 ng-bootstrap 遵循的模式。使用指向TypeScript定义文件的import，使其可以编译

import { ... } from '@ng-bootstrap/ng-bootstrap';

如果您查看 node_modules/@ng-bootstrap/ng-bootstrap 目录，您应该会看到 index.d.ts 文件。这就是 TypeScript 将用来编译的内容。编译为JS时，编译如下

var something = require('@ng-bootstrap/ng-bootstrap').something;

并且在SystemJS的配置中，我们需要将@ng-bootstrap/ng-bootstrap映射到模块文件的绝对路径，否则SystemJS不知道如何解析。

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

其中的一个关键收获是理解编译时和运行时之间的区别。编译类型是 TypeScript，它对 JS 文件一无所知，因为它们是运行时文件。 SystemJS 是需要了解运行时 (JS) 文件的那个。