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页面上

现在，当我运行项目时，出现以下错误消息

未捕获的ReferenceError：未定义导出在app.js：2（匿名）@ 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 repo：https://github.com/iamthebarnsley/TSExample

Answer 1

您的HTML页面似乎仍在引用app.js。如果您想遵循the guide you linked，则HTML页面应改为引用Webpack生成的bundle.js文件。

第二回合

如果您想使用swalHelloWorld从HTML调用<input id="swalalert" type="button" value="swal alert" onclick="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和sweetalert2未捕获的ReferenceError：未定义导出

1 个答案:

第二回合

更新，2018-09-30