javascript - 如何在Electron主js脚本中调用Webpack捆绑的函数

标签 javascript node.js webpack electron commonjs

我正在尝试从我的(webpack'ed) bundle 包访问功能,但该功能未定义。 (整个对象为空)(在electron-main.js中,请参见appBundle.test())
我一直在网上搜索,但找不到所需的答案。
尝试了所有不同的libraryTarget选项,但没有一个按我期望的方式工作。
这是源代码:
webpack.dev.js:

...

module.exports = Merge(CommonConfig, {
    devtool: "inline-source-map",
    watch: true,

    entry: path.resolve(__dirname, "src/index.ts"),

    output: {
        filename: "bundle.js",
        path: __dirname + "/wwwroot/resources/js/components",
        publicPath: "/resources/js/components/",
        library: "appBundle",
        libraryTarget: "commonjs2"
    },

    plugins: ([
        new webpack.DefinePlugin({
            "process.env": {
                "NODE_ENV": JSON.stringify("development")
            }
        }),

        // Etract CSS
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ]),
})

index.ts:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// Styling
import './application-styling.scss';

// Application
import "./application/index.tsx";

export default function test() {
    console.log('hello');
}

electronic-main.js:

const { BrowserWindow } = require('electron');

const createAppWindow = require('../main/app-process');
const authService = require('../services/auth-service');

global.window = {}; // <- Need to define this manually, else the require call throws errors

const appBundle = require('app-bundle'); // Trying to import the bundle.js here

let win = null;

function createAuthWindow() {
    destroyAuthWin();

    win = new BrowserWindow({
        width: 1000,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            enableRemoteModule: false
        }
    });

    win.loadURL(authService.getAuthenticationURL());

    const { session: { webRequest } } = win.webContents;

    const filter = {
        urls: [
            'http://localhost/callback*'
        ]
    };

    webRequest.onBeforeRequest(filter, async ({ url }) => {

        console.log(appBundle); // <- undefined or empty object, depending on libraryTarget
        console.log(appBundle.test()); // <- error, test is undefined

        await authService.loadTokens(url);
        createAppWindow();
        return destroyAuthWin();
    });
    ...
}


...

最佳答案

显然,import "./application/index.tsx";调用以某种方式弄乱了导出。当我只使用一个干净的文件作为入口点时,它工作正常。
无论如何,我最终只是将 Electron 项目与应用程序 bundle 包一起打包到一个程序包中。

关于javascript - 如何在Electron主js脚本中调用Webpack捆绑的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64557001/

相关文章:

javascript - 使用另一个包含键的数组中的值过滤 json 响应

javascript - 在 jQuery Mobile 面板中显示 geoJSON 属性

javascript - 如果第二个项目的package.json不在项目的根目录中,如何在package.json中添加github依赖项

javascript - 需要通过代码的执行来获取Javascript中的输出

javascript - webpack 中的循环依赖

javascript - 在 if 和 else 中使用标签 &lt;script&gt;

javascript - 像堆栈溢出一样跨越 upvote 插件时显示错误

node.js - Mongoose 嵌套模式验证不起作用

node.js - 使用 Express JS 进行级联式渲染

laravel - 不兼容的单位 : 'rem' and 'px' - Bootstrap 4 and Laravel Mix