运行 browserify 后无法调用函数

Question

我有一个 es6 JS class 下面我通过 browserify 运行在 es5 中输出。下面是我的 es6 JS class:

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

我最终将 webpack 与 babel loader 结合使用：

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 中，当需要 'module' 时，我将 js 文件的脚本标签类型属性设置为 'text/javascript'。我还链接了各个脚本文件，但只需要引用使用上面生成的 bundle js。

最后，在我的脚本中，我必须像这样将 js class 暴露给 Window（将其放在 js class 的末尾）：

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

然后我可以在我的 Blazor 组件中调用 js 函数 class 使用：

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

运行 browserify 后无法调用函数

Cannot call functions after running browserify

javascript

node.js

ecmascript-6

browserify

babelify