运行browserify后无法调用函数

Question

我有一个 es6 JS 类，我通过 browserify 运行它以在 es5 中输出。下面是我的 es6 JS 类：

import $j from "jquery";
import BaseComponent from './Components/base-component';

class QuestionnaireView extends BaseComponent {

constructor() {

    super();

    this.defaultOptions = {
        questionId : '#questionId',
        responseId : '#responseId',
        answerId : '#answerId',
        questionTextId : '#questionTextId'
    };

    this.state = {
    };
}

initChildren() {
}

addListeners() {
}

collectQuestions() {
    var questionAndAnswersDict = [];
    var answersAndWeightingsDict = [];
    
    $j(this.options.questionId).each(function () {
        var questionText = $j(this).find("input")[0].value;
        $j(this.options.answerId).each(function () {
            var answerText = $j(this).find("input")[0].value;
            var weighting = $j(this).find("input")[1].value;
            answersAndWeightingsDict.push({
                key: answerText,
                value: weighting
            });
        });
        questionAndAnswersDict.push({
            key: questionText,
            value: answersAndWeightingsDict
        });
    });
}

collectResponses() {
    var responsesDict = [];
    var weightingDict = [];

    $j(this.options.responseId).each(function () {
        var minWeighting = $j(this).find("input")[0].value;
        var maxWeighting = $j(this).find("input")[1].value;
        var responseText = $j(this).find("input")[2].value;
        weightingDict.push({
            key: minWeighting,
            value: maxWeighting
        });
        responsesDict.push({
            key: responseText,
            value: weightingDict
        });
    });
}
}

export default () => { return new QuestionnaireView(); };

这是我正在运行的 browserify 命令：

browserify Scripts/questionnaire-view.js -o wwwroot/js/questionnaire-view.js

我也试过

browserify Scripts/questionnaire-view.js -o wwwroot/js/questionnaire-view.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-modules-commonjs ] ]

输出的 JS 文件看起来没问题，不会在开发工具中抛出任何错误，但是当我调用一个函数时，我得到以下信息：

Error: Microsoft.JSInterop.JSException: Could not find 'collectQuestions' ('collectQuestions' was undefined).
Error: Could not find 'collectQuestions' ('collectQuestions' was undefined).
at http://localhost:41131/_framework/blazor.server.js:1:288
at Array.forEach (<anonymous>)
at r.findFunction (http://localhost:41131/_framework/blazor.server.js:1:256)
at v (http://localhost:41131/_framework/blazor.server.js:1:1882)
at http://localhost:41131/_framework/blazor.server.js:1:2662
at new Promise (<anonymous>)
at et.beginInvokeJSFromDotNet (http://localhost:41131/_framework/blazor.server.js:1:2643)
at http://localhost:41131/_framework/blazor.server.js:1:62750
at Array.forEach (<anonymous>)
at et._invokeClientMethod (http://localhost:41131/_framework/blazor.server.js:1:62736)

非常感谢任何帮助:)

Answer 1

我最终使用了带有 babel loader 的 webpack：

var devJSConfig = Object.assign({}, config, {
mode: 'development',
entry: [
    path.resolve(__dirname, './Scripts/Components/base-component.js'),
    path.resolve(__dirname, './Scripts/address-view.js'),
    path.resolve(__dirname, './Scripts/customer-view.js'),
    path.resolve(__dirname, './Scripts/questionnaire-view.js')
],
output: {
    path: path.resolve(__dirname, 'wwwroot/js'),
    filename: "[name].js"
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: '/node_modules/',
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "@babel/preset-env"
                        ]
                    }
                }
            ]
        }
    ]
}

});

在我的 _Host.cshtml 中，我的 js 文件的脚本标记类型属性在需要为“模块”时设置为“文本/javascript”。我还链接了各个脚本文件，但只需要引用使用上面生成的 bundle js。

最后在我的脚本中，我不得不像这样将 js 类暴露给 Window（将它放在 js 类的末尾）：

window['QuestionnaireView'] = new QuestionnaireView();

然后我可以使用以下方法在我的 Blazor 组件类中调用 js 函数：

var test = await jSRuntime.InvokeAsync<Object>("QuestionnaireView.collectQuestions");