Question

我注意到 babel 和 webpack 在编译文件时会生成一个.JS主文件，名为"bundle“ （如果您输入此名称作为入口点） ...

但这对于 SPA（单页应用程序）系统非常好，在我的情况下，我正在创建一个多页系统，因此我不想加载所有不必要的.JS文件，一次全部...

因此，到目前为止，我正在使用命令"tsc filename.js"将手中的打字稿进行翻译，.. 问题是，如果我导出并导入它，则会返回以下错误：

Uncaught ReferenceError: exports is not defined
    at IndexPage.js: 2

我应该怎么做才能使其正常工作？

IndexPage.ts

import TypingText from '../animations/TypingText';

class OnloadIndexPage {
    public onloadDOM() {
        document.addEventListener('DOMContentLoaded', () => {
            const animation = new TypingText('mainPhraseText', 'Uma estrutura moderna para comparação de repositórios baseada no GitHub');
            animation.start();
        });
    }
}

const init = new OnloadIndexPage();
init.onloadDOM();

TypingText.ts

export default class TypingText {
    private div  : HTMLElement;
    private text : string;

    public constructor(theDivId: string, theText: string){
        this.div  = document.getElementById(theDivId);
        this.text = theText;
    }

    public start(){
        const char = this.text.split('').reverse();
        const timer = setInterval(() => {
            if (!char.length) {
                return this.stop(timer)
            } else {
                const next = char.pop();
                this.div.innerHTML += next;
            }
        }, 100);
    }

    private stop(timer){
        clearInterval(timer);
    }

}

编译时，它看起来像这样： TypingText.js

"use strict";
exports.__esModule = true;
var TypingText = /** @class */ (function () {
    function TypingText(theDivId, theText) {
        this.div = document.getElementById(theDivId);
        this.text = theText;
    }
    TypingText.prototype.start = function () {
        var _this = this;
        var char = this.text.split('').reverse();
        var timer = setInterval(function () {
            if (!char.length) {
                return _this.stop(timer);
            }
            else {
                var next = char.pop();
                _this.div.innerHTML += next;
            }
        }, 100);
    };
    TypingText.prototype.stop = function (timer) {
        clearInterval(timer);
    };
    return TypingText;
}());
exports["default"] = TypingText;

IndexPage.js

"use strict";
exports.__esModule = true;
var TypingText_1 = require("../animations/TypingText");
var OnloadIndexPage = /** @class */ (function () {
    function OnloadIndexPage() {
    }
    OnloadIndexPage.prototype.onloadDOM = function () {
        document.addEventListener('DOMContentLoaded', function () {
            var animation = new TypingText_1["default"]('mainPhraseText', 'Uma estrutura moderna para comparação de repositórios baseada no GitHub');
            animation.start();
        });
    };
    return OnloadIndexPage;
}());
var init = new OnloadIndexPage();
init.onloadDOM();

Answer 1

如果您不想使用webpack，则应使用SystemJS之类的模块加载器，该模块加载器仅允许您在页面中加载必要的JavaScript。

SystemJS可以UMD格式加载模块，必须将UMD中的模块类型更改为tsconfig.json才能通过UMD加载。尽管SystemJS可以加载CommonJS模块，但是它将需要eval，并且您可能无法将内容安全策略应用于页面。

如何在Typescript转换中使用导入和导出？

1 个答案: