javascript - 使用 Grails 设置 React
问题描述
我目前正在将 React 与 Grails (2.3.11) 集成。然而,似乎即使是最基本的设置也让我很难过。我已经设置了我以前对过去项目所做的文件和文件夹结构,但似乎不想找到我的 bundle.js 文件。无论我更改路径多少次,我都会不断收到 404。
我的 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 文件并呈现反应代码:
<!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'));
非常感谢您可以抛弃我的任何建议或帮助!我愿意尝试!谢谢!
解决方案
经过大量的实验,我发现了需要做的事情。因为这是一个 Grails 应用程序,所以它编写得非常具体,并且必须输出到正确的文件夹中。
将脚本行更改为:
<g:javascript src="bundle.js"></g:javascript>
然后确保在 web-app/js 文件夹中输出 bundle.js 文件。这是必须的。所以把你的 webpack 改成这样:
var BUILD_DIR = path.resolve(__dirname, 'web-app/js');
那解决了!
推荐阅读
- c++ - 我的 C++ 合并排序代码不起作用。我在这里想念什么?
- elasticsearch - 在启用 include_in_parent 的情况下,针对 elasticsearch 中嵌套字段的嵌套查询与非嵌套查询
- centos - Webmin 错误 - 通过文件管理器更改目录的权限
- php - PHP regex - 将纯文本除以字符串对象
- sql - 使用 Apache Spark SQL 对结果进行子分组
- sql - 根据特定条件过滤 postgres 值
- flutter - 为什么它不改变按钮的高度和宽度
- c# - 未处理的异常:System.ArgumentException:无法从源类型扩展到目标类型
- python - 在类中添加方法
- python - 将两种不同格式的 csv 文件与 python 进行比较