typescript and sweetalert2 Uncaught ReferenceError: exports is not defined

Question

开始了一个全新的.net core 2.0项目开始学习，我选择使用和学习打字稿。我一直在关注位于此处的指南：typescript guide

编译并运行良好。

然后我想使用我过去使用过的 sweetalert2，我遵循了这些说明 sweetalert2

我在 ts 文件中创建了一个简单的 helloWorld()

import swal from 'sweetalert2'

function swalHelloWorld() {
    swal('hello world!');
}

它也在我的 www 文件夹的 js 文件中编译

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var sweetalert2_1 = require("sweetalert2");
function swalHelloWorld() {
    sweetalert2_1.default('hello world!');
}

并包含在 _layout 页面中

现在当我运行我的项目时，我得到以下错误

Uncaught ReferenceError: exports is not defined at app.js:2 (anonymous) @ app.js:2

第2行如下

Object.defineProperty(exports, "__esModule", { value: true });

我尝试按照指南 here 进行更正，但这没有帮助

我的tsconfig.json是

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node"
  },
  "files": [
    "./scripts/app.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

我不确定如何解决这个问题

webpack 配置

var path = require('path');

module.exports = {
    entry: {
        site: [
            './Scripts/app.ts']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'wwwroot/dist/')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    }
};

git 回购：https://github.com/iamthebarnsley/TSExample

Answer 1

您的 HTML 页面似乎仍在引用 app.js。如果你想跟随 the guide you linked，HTML 页面应该引用 Webpack 生成的 bundle.js 文件。

第 2 轮

如果你想用 <input id="swalalert" type="button" value="swal alert" onclick="swalHelloWorld();" /> 从你的 HTML 调用 swalHelloWorld，那么你需要全局定义 swalHelloWorld：

import swal from 'sweetalert2'

function swalHelloWorld() {
    swal('hello from sweet alert');
}
(<any>window).swalHelloWorld = swalHelloWorld;

没有这个，Webpack 就很聪明，意识到没有办法调用 swalHelloWorld（因为它也没有从模块中导出）并从输出中省略它。当我进行此更改并如前所述将 HTML 中的 build/app.js 替换为 dist/bundle.js 时，警报对我有效。

更新，2018-09-30

我了解了一个更简洁的解决方案：将 library 选项添加到 Webpack 配置，如图 here 和您选择的名称（例如，swalHelloWorld），然后将定义一个名为 swalHelloWorld 的全局变量，代表整个入口点模块。那么如果你从模块中导出一个函数：

import swal from 'sweetalert2'

export function swalHelloWorld() {
    swal('hello from sweet alert');
}

HTML 可以将其称为 swalHelloWorld.swalHelloWorld(...) 或类似名称。

typescript and sweetalert2 Uncaught ReferenceError: exports is not defined