我目前正在将React与Grails(2.3.11)集成。但是，即使最基本的设置似乎也给我带来了困难。我已经设置了以前在过去的项目中所做的文件和文件夹结构，但是似乎不想找到我的bundle.js文件。无论更改路径有多少次，我都会不断收到404。
This is basically what happens all the time!
我的package.json文件:
{
"name": "react_test",
"version": "1.0.0",
"description": "Grails with React",
"main": "index.js",
"license": "MIT",
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"redux-logger": "^3.0.6",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
}
我的root.gsp文件应该用来拾取bundle.js文件并呈现react代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grails with React</title>
<script src="../../../src/react/public/bundle.js"></script>
</head>
<body>
<div id="root">
<p>React broke down</p>
</div>
</body>
</html>
我的Webpack文件:
var webpack = require('webpack')
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/react/public');
var APP_DIR = path.resolve(__dirname, 'src/react/app');
var config = {
entry: APP_DIR + '/main.jsx',
mode : 'development',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
rules : [
{
test : [/\.jsx?$/, /\.js?$/],
exclude: /node_modules/,
include: APP_DIR,
loader : 'babel-loader',
query: {
presets: ['react', 'env']
}
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", '.jsx', '*']
}
};
module.exports = config;
最后，这是我简单的起始文件:
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello, World!</p>;
}
}
render(<App/>, document.getElementById('root'));
If it helps, here's my folder structure!
您可以抛弃我的任何建议或帮助，我们将不胜感激!我愿意尝试!谢谢!
最佳答案
经过大量的实验，我发现需要做些什么。因为这是Grails应用程序，所以它的编写非常特别，必须输出到正确的文件夹中。
将脚本行更改为此:
<g:javascript src="bundle.js"></g:javascript>
然后确保在web-app / js文件夹中输出bundle.js文件。这是必须的。因此，将您的webpack更改为:
var BUILD_DIR = path.resolve(__dirname, 'web-app/js');
解决了!
关于javascript - 用Grails设置React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50952034/