使用webpack編譯的JSInterop在blazor中未定義

我有一個 Blazor webassembly 應用程式，我試圖在其中使用 JSInterop 包含 typescript/javascript 代碼，但在構建期間由 webpack 創建 js 代碼時失敗了。

使用以下內容hello-world.js在 my 中創建一個簡單檔案時：wwwroot

export function showAlertSimple() {
    alert("hello world");
}

我可以使用以下方法輕松呼叫它：

public class HelloWorld : JSModule
{
    public HelloWorld(IJSRuntime js) 
        : base(js, "./js/hello-world.js")
    {
    }

    public async Task ShowAlert() => await InvokeVoidAsync("showAlert");
}

如果我嘗試對我在不同位置創建的打字稿檔案執行相同的操作，然后使用 webpack 將其編譯為 ES6，將其放入同一檔案夾中，blazor 將無法呼叫該方法：

./NpmJs/src/hello-world2.ts

export function showAlertFromWebPack() {
    alert("Hello World from webpack");
}

./NpmJs/webpack.config.js

module.exports = {
    entry: {
        helloworld2: './src/hello-world2.ts',
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../../wwwroot/js'),
    },
    devtool: 'source-map'
};

public class HelloWorld2 : JSModule
{
    public HelloWorld2(IJSRuntime js)
        : base(js, "./js/helloworld2.bundle.js")
    {
    }

    public async Task ShowAlert() => await InvokeVoidAsync("showAlertFromWebPack");
}

然后在瀏覽器控制臺中拋出以下例外：

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'showAlertFromWebPack' ('showAlertFromWebPack' was undefined).
      Error: Could not find 'showAlertFromWebPack' ('showAlertFromWebPack' was undefined).

檔案本身已正確加載。我可以在源選項卡中看到它。

我在這里錯過了什么？

為了完整起見，這是JSModule類，我在 github 上無恥地從 Steven Sanderson 那里插入了它。

public abstract class JSModule : IAsyncDisposable
{
    private readonly Task<IJSObjectReference> moduleTask;

    // On construction, we start loading the JS module
    protected JSModule(IJSRuntime js, string moduleUrl)
        => moduleTask = js.InvokeAsync<IJSObjectReference>("import", moduleUrl).AsTask();

    // Methods for invoking exports from the module
    protected async ValueTask InvokeVoidAsync(string identifier, params object[]? args)
        => await (await moduleTask).InvokeVoidAsync(identifier, args);
    protected async ValueTask<T> InvokeAsync<T>(string identifier, params object[]? args)
        => await (await moduleTask).InvokeAsync<T>(identifier, args);

    // On disposal, we release the JS module
    public async ValueTask DisposeAsync()
        => await (await moduleTask).DisposeAsync();
}

uj5u.com熱心網友回復：

我找到了 2 個可行的解決方案。一個使用 webpack，另一個放棄 webpack 并用 vitejs 替換它。

使用webpack我們需要啟用experiments.outputModule（https://webpack.js.org/configuration/experiments/#experimentsoutputmodule）并設定output.library.type為module（https://webpack.js.org/configuration/output/#outputlibrarytype）：

最終配置將如下所示：

module.exports = {
    entry: {
        helloworld2: './src/hello-world2.ts',
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../../wwwroot/js'),
        library: {
            type: "module",
        },
    },
    experiments: {
       outputModule: true
    },
    devtool: 'source-map'
};

使用vitejs和 vite.config.js，配置看起來像這樣：

import * as path from 'path';
import { defineConfig } from "vite";

export default defineConfig({
   appType: 'mpa',
   build: {
      target: 'esnext',
      outDir: '../wwwroot/js',
      lib: {
         entry: path.resolve(__dirname, './src/index.ts'),
         name: "YourPackageName",
         fileName: (format) => `your-package-name.${format}.js`,
      },
   }
});

然后 Vite 本身會產生 2 個檔案：

• your-package-name.es.js
• your-package-name.umd.js

您需要在 blazor 中鏈接/使用 es 檔案，一切順利。

標籤：javascript打字稿网页包开拓者blazor-webassembly

上一篇：WebpackSyntaxError-模塊構建失敗（來自./node_modules/babel-loader/lib/index.js）

下一篇：single-spa-angular與另一個angular應用程式共享angularlibaray（帶UI）會出錯