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

Question

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

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

'@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) 文件的那个。