Question

我一直在关注Spring的关于同时使用Boot和React的教程（我对React和JavaScript的使用经验有限）：https://spring.io/guides/tutorials/react-and-spring-data-rest/

我已经完成了设置阶段，API可以正常工作，java端也可以正常工作，但是localhost仅返回一个空白页（React不会挂钩到DOM中的元素）。

我对Webpack的了解很少。我已经按照教程进行了逐步操作（但是，当然可能会以错误的方式出现）。我修改了pom.xml并在目标文件夹中看到了节点文件夹。

本教程提到“ JavaScript开发人员通常使用npm来构建package.json文件，如下所示”，并附加代码，但未指定该文件的位置。

我已经创建了这个package.json，位于项目的根目录：

{
  "name": "spring_rest_react",
  "version": "0.0.1",
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rest": "^1.3.1"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js与本教程中复制的以下代码位于同一位置：

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',      
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

我认为我错过了Webpack的东西。该教程说应该对其进行“定义”，但没有描述具体的方式或位置。

我非常感谢指出我正在做的错误。到目前为止，我一直都使用create-react-app，这是我第一次尝试将其连接到Java，但我有点迷路。

Answer 1

出现此问题的原因是，您可以在

下找到webpack.config.js的默认设置。

{YOUR_PROJECT_DIRECTORY} /node_modules/react-scripts/config/webpack.config.js

找到属性const shouldUseRelativeAssetPaths并将其值更改为

const shouldUseRelativeAssetPaths = publicPath ==='./'

到

const shouldUseRelativeAssetPaths = publicPath ==='。'。

重建您的项目，该问题很可能得到解决。

Answer 2

他告诉你添加

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
</plugin>

但实际上，如果您查看 github 存档，则有一个父 pom.xml。如果你不使用它，你真的需要添加

                        <plugin>
                                <groupId>com.github.eirslett</groupId>
                                <artifactId>frontend-maven-plugin</artifactId>
                                <version>1.9.1</version>
                                <configuration>
                                        <installDirectory>target</installDirectory>
                                </configuration>
                                <executions>
                                        <execution>
                                                <id>install node and npm</id>
                                                <goals>
                                                        <goal>install-node-and-npm</goal>
                                                </goals>
                                                <configuration>
                                                        <nodeVersion>v12.14.0</nodeVersion>
                                                        <npmVersion>6.13.4</npmVersion>
                                                </configuration>
                                        </execution>
                                        <execution>
                                                <id>npm install</id>
                                                <goals>
                                                        <goal>npm</goal>
                                                </goals>
                                                <configuration>
                                                        <arguments>install</arguments>
                                                </configuration>
                                        </execution>
                                        <execution>
                                                <id>webpack build</id>
                                                <goals>
                                                        <goal>webpack</goal>
                                                </goals>
                                        </execution>
                                </executions>
                        </plugin>

此外，还有 src/main/js/client.js 和 src/main/js/api/* 需要从 github 存档中删除的 javascript 模块。

尝试连接React和Java导致浏览器显示空白页面

2 个答案: