通过将旧的 AngularJS 迁移到 TypeScript，在 require.js 上忽略导入

Question

我想将我的旧 AngularJS 应用程序从 JavaScript 迁移到 TypeScript。为了加载需求，我使用 require.js。因为我想与非 require.js 脚本兼容，所以我将 umd 用作 module.

例如我有这个文件。

customModule.ts

import angular = require('angular');

angular.module('customModule', []);

main.ts

import angular = require('angular');
import customModule = require('customModule');

angular
    .module('app')
    .factory('customFactory', ['customModule', class {
        constructor(
            private customModule
        ) { }

        out() {
            return this.customModule;
        };
    }]);

这将被转换成这个 JavaScript。

customModule.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "angular"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var angular = require("angular");
    angular.module('customModule', []);
});

main.ts

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "angular"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var angular = require("angular");
    angular
        .module('app')
        .factory('customFactory', ['customModule', (function () {
            function class_1(customModule) {
                this.customModule = customModule;
            }
            class_1.prototype.out = function () {
                return this.customModule;
            };
            ;
            return class_1;
        }())]);
});

如你所见在main.js中有一个define(["require", "exports", "angular"], factory);。但我希望 define(["require", "exports", "angular", "customModule"], factory);.

如果我将 main.ts 上的 return this.customModule; 替换为 return customModule;，它将正确导出它，但我认为我不需要构造函数。 - 正如您在图片上看到的变化，我删除了构造函数，因为它不需要。

如果这个问题得到解决，我可以将我的模块与 TypeScript 一起使用，就像我将它们与 JavaScript <3

一起使用一样

Answer 1

TypeScript 编译器进行了优化，因此如果您有以下代码，就会发生一些神奇的事情...

import * as angular from 'angular';
import * as customModule from 'customModule';

angular
    .module('app')
    .factory('customFactory', ['customModule', class {
        constructor(
            private customModule
        ) { }

        out() {
            return this.customModule;
        };
    }]);

因为编译器看不到任何对 customModule 中任何内容的引用，它优化了导入。

您可以通过使用导入的模块或使用强制导入来修复它，如下所示：

import * as angular from 'angular';
import 'customModule'; // <-- FORCED

angular
    .module('app')
    .factory('customFactory', ['customModule', class {
        constructor(
            private customModule
        ) { }

        out() {
            return this.customModule;
        };
    }]);

通过将旧的 AngularJS 迁移到 TypeScript，在 require.js 上忽略导入

Import is ignored on require.js by migrating old AngularJS to TypeScript

javascript

requirejs

angularjs

typescript

umd