用Grails设置React

Question

I'm currently working on integrating React with Grails (2.3.11). 我目前正在将React与Grails（2.3.11）集成。 It seems however that even the most basic setup is giving me a hard time. 但是，即使最基本的设置似乎也给我带来了困难。 I've set up my file and folder structure that I have done before with past projects but my bundle.js file just doesn't seem to be want to be found. 我已经设置了以前在过去的项目中所做的文件和文件夹结构，但是似乎不想找到我的bundle.js文件。 I keep getting a 404 no matter how many different times I change the path. 无论更改路径有多少次，我都会不断收到404。

This is basically what happens all the time! 基本上，这总是发生！

My package.json file: 我的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"
  },
}

My root.gsp file that is supposed to pick up the bundle.js file and render the react code: 我的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>

My Webpack file: 我的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;

Finally here's my simple starting file: 最后，这是我简单的起始文件：

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! 如果有帮助，这是我的文件夹结构！

Any advice or help you can throw my away is greatly appreciated! 您可以抛弃我的任何建议或帮助，我们将不胜感激！ I'd be willing to experiment! 我愿意尝试！ Thank you! 谢谢！

Answer 1

After a lot of experimentation I discovered what needed to be done. 经过大量的实验，我发现需要做些什么。 Because this is a Grails application it has be written very specifically and has to be outputted in the correct folder. 因为这是Grails应用程序，所以它的编写非常特别，必须输出到正确的文件夹中。

Change the script line into this: 将脚本行更改为此：

<g:javascript src="bundle.js"></g:javascript>

Then make sure to output the bundle.js file in the web-app/js folder. 然后确保在web-app / js文件夹中输出bundle.js文件。 This is a must. 这是必须的。 So change your webpack to this: 因此，将您的webpack更改为：

var BUILD_DIR = path.resolve(__dirname, 'web-app/js');

That solved it! 解决了！

用Grails设置React

问题描述

1 个解决方案

解决方案1
0 2018-06-21 18:37:58

用Grails设置React

问题描述

1 个解决方案

解决方案1 0 2018-06-21 18:37:58

解决方案1
0 2018-06-21 18:37:58