在使用nashorn和webpack4进行服务器端渲染期间未定义“窗口”

Question

我正在尝试使用SpringMVC，Nashorn，webpack4和VueJS创建同构应用程序。在Nashorn引擎评估javascript（webpack4捆绑包）期间，我遇到了一个问题。它会抛出ScriptExceptions，例如：

• “窗口”未定义
• ”无法从未定义的“”中读取属性“ userAgent” 如果我在nashorn-polyfill.js中设置了 window （窗口），则是window.navigator。

我尝试了许多变体，但没有找到使 webpack捆绑包停止运行在浏览器中的解决方案或解决方法。如果有人知道如何修复它，那就太好了。

我的 webpack.config.js ：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');


const ROOT = path.join(__dirname, "src/main/resources/");
const SRC = path.join(ROOT, "index.js");
const TARGET = path.join(__dirname, "src/main/webapp", "dist");

module.exports = {
    devtool: "source-map",
    entry: SRC,
    output: {
        path: TARGET,
        filename: "bundle.js", //.[chunkhash]
        publicPath: "/",
        library: "Isomorphic",
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },

    resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                },

            },
            {
                test: /\.scss$/,
                use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(TARGET, {}),
        new MiniCssExtractPlugin({
            filename: "assets/css/style.[contenthash].css"
        }),
        new HtmlWebpackPlugin({
            title: "Welcome to Isomorphic world!",
            inject: false,
            hash: true,
            template: ROOT + "/assets/templates/index.html",
            filename: "templates/index.html"
        }),
        new WebpackMd5Hash(),
        new VueLoaderPlugin()

    ],
    devServer: {
        port: 5000,
        open: false,
        overlay: true,
        watchOptions: {
            aggregateTimeout: 300
        }
    }
};

我发现Node：解决方案设置了 output.globalObject：'this'，并试图将webpack版本降级到3.12.0，但这并没有帮助我。

Vue.java 中的服务器端呈现：

package components;

import jdk.nashorn.api.scripting.NashornScriptEngine;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;

import javax.script.ScriptEngineManager;
import javax.script.ScriptException;
import java.io.IOException;

@Component
public class Vue {

    @Value(value = "classpath:static/nashorn-polyfill.js")
    private Resource nashornPolyfillFile;

    @Value(value = "/dist/bundle.js")
    private Resource bundleJsFile;

    public String renderEntryPoint() throws ScriptException, IOException {

        NashornScriptEngine nashornScriptEngine = getNashornScriptEngine();

        try {
            Object html = nashornScriptEngine.invokeFunction("renderServer");
            return String.valueOf(html);
        } catch (Exception e) {
            throw new IllegalStateException("Error! Failed to render vue component!", e);
        }

    }

    private NashornScriptEngine getNashornScriptEngine() throws ScriptException, IOException {

        NashornScriptEngine nashornScriptEngine = (NashornScriptEngine) new ScriptEngineManager()
                .getEngineByName("nashorn");

        evaluateScripts(nashornScriptEngine, nashornPolyfillFile, bundleJsFile);

        return nashornScriptEngine;
    }

    private void evaluateScripts(NashornScriptEngine nashornScriptEngine, Resource... resources) throws ScriptException, IOException {

        for (Resource resource : resources) {
            nashornScriptEngine.eval("load('" + resource.getURI() + "')");
        }
    }
}

nashorn-polyfill.js ：

var global = this;
// var window = this; //leads to another error "cannot read property 'userAgent' from undefined' of window.navigator.

var console = {};
console.debug = print;
console.warn  = print;
console.log   = print;
console.error = print;

GitHub-如果对某人来说更舒服。