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

Question

虽然 SystemJS 上有很多 questions 和 documentation，但我仍然不明白导入语法。 具体来说，为什么打字稿找不到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';

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

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

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

Answer 1

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

首先，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文件（上面第一个代码sn-p中的那个）只在运行时使用。 TypeScript 应该对该文件一无所知。

使用上面的第二个sn-p，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 { ... } 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) 文件的那个。