错误：（SystemJS）导出未定义答案

【问题标题】：Error: (SystemJS) exports is not defined错误：（SystemJS）导出未定义
【发布时间】：2018-12-30 23:49:48
【问题描述】：

我正在开发一个 .net core mvc + angular 应用程序。 mvc 框架处理用户管理，当用户登陆应用程序的特定区域时，Angular 接管。因此，当我向站点添加一个 angular-2（统计）应用程序并且它正在工作时。我需要实现另一个功能，所以我在同一个解决方案中添加了另一个 angular-2 应用程序（实践）。一切都很好。 Angular-4 出现了。因此更改了对 angular-4 的引用，并且由于我正在研究第二个 Angular 应用程序，因此有一段时间没有检查第一个 Angular 应用程序。现在，当我尝试运行第一个 Angular 应用程序（统计信息）时，我在第二个应用程序加载 Angular 时收到此错误。

两个应用共享 systemjs.config.js、package.json、tsconfig.json、typings.json。

错误：

Error: (SystemJS) exports is not defined
ReferenceError: exports is not defined
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            stats: 'apps/stats/',
            practices: 'apps/practices',

            // angular bundles
            '@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',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            stats: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            practices: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "@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",
    "@types/node": "^7.0.13",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.3.0",
    "spinkit": "1.2.5",
    "systemjs": "0.19.39",
    "typescript": "2.2.1",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "concurrently": "3.1.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-environments": "0.1.1",
    "gulp-rimraf": "0.2.0",
    "gulp-uglify": "2.0.0",
    "lite-server": "2.2.2",
    "typescript": "2.2.1",
    "typings": "~2.1.1"
  }
}

tsconfig.json

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

    "exclude": [
      "node_modules",
      "wwwroot/lib",
      "typings"
    ]

  }

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#7.0.0+20170110233017"
  }
}

date.extensions.ts

export { }

// DATE EXTENSIONS
// ================

declare global {
    interface Date {
        addDays(days: number, useThis?: boolean): Date;
        isToday(): boolean;
        clone(): Date;
        isAnotherMonth(date: Date): boolean;
        isWeekend(): boolean;
        isSameDate(date: Date): boolean;
        yyyy_mm_dd(): string;
    }
}

Date.prototype.addDays = function (days: number): Date {
    if (!days) return this;
    console.log(this);
    let date = this;
    date.setDate(date.getDate() + days);

    return date;
};

Date.prototype.isToday = function (): boolean {
    let today = new Date();
    return this.isSameDate(today);
};

Date.prototype.clone = function (): Date {
    return new Date(+this);
};

Date.prototype.isAnotherMonth = function (date: Date): boolean {
    return date && this.getMonth() !== date.getMonth();
};

Date.prototype.isWeekend = function (): boolean {
    return this.getDay() === 0 || this.getDay() === 6;
};

Date.prototype.isSameDate = function(date: Date): boolean {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};

Date.prototype.yyyy_mm_dd = function (): string {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();

    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
}

date.extensions.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Date.prototype.addDays = function (days) {
    if (!days)
        return this;
    console.log(this);
    var date = this;
    date.setDate(date.getDate() + days);
    return date;
};
Date.prototype.isToday = function () {
    var today = new Date();
    return this.isSameDate(today);
};
Date.prototype.clone = function () {
    return new Date(+this);
};
Date.prototype.isAnotherMonth = function (date) {
    return date && this.getMonth() !== date.getMonth();
};
Date.prototype.isWeekend = function () {
    return this.getDay() === 0 || this.getDay() === 6;
};
Date.prototype.isSameDate = function (date) {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};
Date.prototype.yyyy_mm_dd = function () {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();
    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
};
//# sourceMappingURL=date.extentions.js.map

【问题讨论】：

apps/common/date.extentions.js 中有什么内容？
如果你将'apps/common/date.extensions.js'添加到包中并添加format: 'cjs'呢？
添加了 date.extensions 文件
啊，我明白了。摆脱export {}，它应该可以正常工作。我不认为 SystemJS 的格式检测会发现这一点，因为没有分配给 module.exports 也没有分配给 requires。只需将其导入为import 'apps/common/date.extensions.js'，不带from 另外，删除declare global 包装器，因为除非您这样做，否则在删除export {} 时类型检查将失败
感谢您的帮助。我会尝试你的最后一个建议。但是想让大家知道，添加 format: cjs 也解决了。

标签： angular typescript

【解决方案1】：

要么从apps/common/date.extensions.ts中删除export {}，或明确指定"cjs"的模块格式.

SystemJS 使用模块格式检测来确定需要提供哪些变量才能加载模块。但是，它不会将您的 date.extensions.js 识别为 CommonJS，因为没有分配给 module.exports 并且没有调用 require (1)。

要明确设置模块格式，请添加

packages: {
  "apps/common/date.extensions.js": {
    "format": "cjs"   
  },
  // ...
}

SystemJS 现在将使用此元数据而不是启发式方法来确定格式，因此在加载模块时将提供一个 exports 对象。

或者，由于文件不需要是模块，您可以删除 export {} 和 declare global 包装器。

除其他外，这涉及正则表达式，它试图通过搜索 /exports\.*"\s*=\s*.+/g 等模式来检测 CommonJS。然而，这并不是万无一失的，特别是考虑到 SystemJS 检测到的某些模块格式是其他模块格式的部分超集。例如，一个 AMD 模块可以匹配相同的正则表达式，因为它提供了自己的 CommonJS 兼容层。也就是说，SystemJS 模块格式检测功能非常强大，它允许许多不一致的模块系统自动正确地交互，而无需进行任何配置。 Guy Bedford 的工作非常出色。

【讨论】：