未定义出口答案

【问题标题】：Exports is not defined未定义出口
【发布时间】：2017-09-07 18:45:37
【问题描述】：

我正在尝试基于我的第一个应用程序生成一个 Angular 应用程序，这给我带来了一些麻烦。

这是我得到的：

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>FiveRX 2.0 Management</title>
    <meta charset="utf-8"/>

    <!-- Dependencies -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/systemjs/dist/system.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>

    <!-- Init Application -->
    <script src="/app/config/system.config.js"></script>
    <script src="/app/config/system.init.js"></script>

</head>
<body>
<div class="header">
    <div class="title">Troubleshooting</div>
</div>
<layout></layout>
</body>
</html>

system.config.js

(function (global) {
    System.config({
        paths: {
            "npm:": "node_modules/"
        },

        map: {
            "app": "app",
            "@angular/core": "npm:@angular/core/bundles/core.umd.js",
            "@angular/common": "npm:@angular/common/bundles/common.umd.js",
            "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js",
            "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
            "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
            "@angular/http": "npm:@angular/http/bundles/http.umd.js",
            "@angular/router": "npm:@angular/router/bundles/router.umd.js",
            "@angular/forms": "npm:@angular/forms/bundles/forms.umd.js",
            "@angular/animations": "npm:@angular/animations/bundles/animations.umd.js",
            "@angular/animations/browser": "npm:@angular/animations/bundles/animations-browser.umd.js",
            "@angular/platform-browser/animations": "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js",
            "rxjs": "npm:rxjs",
        },
        packages: {

            app: {
                main: "bootstrap.js"
            },
            rxjs: {
                defaultExtension: "js"
            },
            scripts: {
                format: "register",
                defaultExtension: "js",
                scriptLoad: true
            }
        },
        meta: {
            "*": {
                authorization: true
            }
        }
    });
})(this);

system.init.js

System.import('app')
    .catch(function(err) {
         console.error(err);
    });

bootstrap.ts

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [ "es5", "es6", "es2015", "dom" ]
    }
}

如您所见，引导文件只包含平台浏览器动态的导入。当我尝试运行它时出现以下错误：

Error: exports is not defined
  Evaluating http://localhost:55549/app/bootstrap.js
  Loading app
    at eval (:55549/app/bootstrap.js:2)
    at eval (<anonymous>)
    at _e (evaluate.js:106)
    at instantiate.js:414
    at R (register-loader.js:684)
    at E (register-loader.js:631)
    at O (register-loader.js:540)
    at register-loader.js:128
    at ZoneDelegate.invoke (zone.js:365)
    at Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.invokeTask (zone.js:398)
    at Zone.runTask (zone.js:165)
    at drainMicroTaskQueue (zone.js:593)
    at <anonymous>

现在，我可以通过针对 ES6 而不是 ES5 来实现它，但这既不是解释也不是选项。有什么想法吗？

【问题讨论】：

这不是您问题的直接答案，但是 - 如果您刚开始使用 Angular，我强烈建议您使用 CLI，而不是尝试手动配置所有内容。

标签： angular typescript systemjs

【解决方案1】：

你遇到了一个相当奇怪的情况。

使用您的配置，tsc 会将模块编译为 CommonJS 格式，如果您的目标是 not es6，这是默认格式。所以你的bootstrap.ts 代码编译成这个 JavaScript：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=bootstrap.js.map

SystemJS 通常能够识别模块是 CommonJS 模块，并会自动提供适合这种情况的执行环境。 不幸的是，上面生成的代码不足以让 SystemJS 识别出您的模块是 CommonJS 格式，因此它默认为其原生模块格式并在 Object.defineProperty 上失败，因为 exports 没有存在。

在上面的代码中，您会注意到没有与您的import 语句对应的require 调用。这是因为tsc 在运行时检测到不需要require 调用，因此不会发出它。如果您只是将您的 TypeScript 代码更改为此，那么 tsc 将发出一个 require 调用（否则 platformBrowserDynamic() 调用将失败）并且 SystemJS 可以检测模块格式：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

platformBrowserDynamic();

如果 SystemJS 仍然无法检测到格式，请记住您可以在 SystemJS 配置中使用 format option 来告诉 SystemJS 使用特定格式。

当您将目标更改为es6 时，默认模块格式也会更改为es6，这就解释了为什么您不再收到该错误。

【讨论】：