Ruby 带有React的网页包：我缺少什么吗？

这个问题有点长，但我需要解释一下上下文，所以请耐心点

我正在使用以下方式构造的Reacj/Ruby应用程序：

<my_app>
 |
 |_____be/
 |     
 |_____fe/
 |     |
 |     |_____node_module/
 |     |_____public/
 |     |     |_____index.html    
 |     |     |_____index.jsx
 |     |     |_____index.test.js
 |     |     |_____bundle.js
 |     |_____src/
 |           |_____app/
 |           |     |_____app.jsx
 |           |     |_____app.test.js
 |           |     |_____app.css
 |           |_____contents/
 |           |     |_____contents.jsx
 |           |     |_____contents.test.js
 |           |     |_____contents.css
 |           |_____footer/
 |           |     |_____footer.jsx
 |           |     |_____footer.test.js
 |           |     |_____footer.css
 |           |_____header/
 |           |     |_____header.jsx
 |           |     |_____header.teste.js
 |           |     |_____header.css
 |           |_____package.json
 |           |_____index.jsx
 |           |_____index.test.js
 |           |_____index.css
 |_____config.ru
 |_____Gemfile
 |_____Gemfile.lock
 |_____integrations.json
 |_____package.json
 |_____webpack.config.js

这是：

header.jsx 在这之前一切都很好。但我需要将前端应用程序与Webpack捆绑在一起。这是我的配置：

webpack.config.js 如您所见，我正在

fe/public

上创建

bundle.js

。我的

Rack:：Static

配置为在

fe/public

中为所有静态请求提供

index.html

服务，而我的gem则处理动态请求

碰巧的是，尽管所有模块都已正确安装，所有组件都已正确捆绑，但当我使用

rackup

运行应用程序时，我什么也看不到。没有错误，没有问题。。。不要说话！只是一个空白的浏览器屏幕

我到底错过了什么

编辑：

package.json

---

不，我没有使用过

createreact应用程序

。但这不是问题，因为

fe

部分运行良好，即ReactJS部分本身运行良好，我对ReactJS应用程序了解得足够多，即使没有

create react app

，也可以创建它们，特别是一个这么小的应用程序。

我通过对代码进行一些更改来解决问题

首先，我编辑了

webpack.config.js

webpack.config.js 完成此操作后，应用程序仍无法运行。Web包找不到已安装的节点模块。它们在

fe

dir中，然后我用

$ ln -sf fe/node_modules

然后webpack运行良好并创建了捆绑包

这是我的主要目标，将前端完全隔离在

fe

目录内，同时能够从该目录外运行此应用程序，在该目录下，我可以使用单个命令和单个进程运行整个应用程序（后端和前端）。这将使Heroku和其他类似服务的部署更加容易

---

我感谢所有花时间帮助我的人。这是运行web开发框架的最后一步。现在只是进一步改进的问题。

我通过对代码进行一些修改解决了这个问题

首先，我编辑了

webpack.config.js

webpack.config.js 完成此操作后，应用程序仍无法运行。Web包找不到已安装的节点模块。它们在

fe

dir中，然后我用

$ ln -sf fe/node_modules

然后webpack运行良好并创建了捆绑包

这是我的主要目标，将前端完全隔离在

fe

目录内，同时能够从该目录外运行此应用程序，在该目录下，我可以使用单个命令和单个进程运行整个应用程序（后端和前端）。这将使Heroku和其他类似服务的部署更加容易

---

我感谢所有花时间帮助我的人。这是运行web开发框架的最后一步。现在只需进一步改进即可。

共享package.json、index.js和index.html可能会有所帮助。还可以尝试在index.js的入口点添加一个控制台日志，看看它是否被命中。另外，npm开始做什么？您是否使用了CreateReact应用程序？从您的描述中不清楚npm start如何启动服务器好的，我会这样做。我编辑了问题@skypecakes。我想起点应该是看是否提供index.html。你查过页面来源了吗？浏览器控制台是否存在错误？共享package.json、index.js和index.html可能会有所帮助。还可以尝试在index.js的入口点添加一个控制台日志，看看它是否被命中。另外，npm开始做什么？您是否使用了CreateReact应用程序？从您的描述中不清楚npm start如何启动服务器好的，我会这样做。我编辑了问题@skypecakes。我想起点应该是看是否提供index.html。你查过页面来源了吗？浏览器控制台是否存在错误？

Header
Contents
Footer

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'fe/src/') + '/index.js',
    output: {
        path: path.resolve(__dirname,'fe/public/'), 
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: './public',
        port: 3333
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
}

{
  "name": "emerald_application",
  "title": "Emerald Framework Application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "fb": "^1.1.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "0.9.5",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "start": "npm run serve | npm run dev",
    "dev": "webpack-dev-server --progress --colors --port 8090"
  }
}

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'fe/src/') + '/index.jsx',
    output: {
        path: path.resolve(__dirname, 'public'), // <<== THIS
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: './app',
        port: 3333
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: [ "node_modules" ],
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

$ ln -sf fe/node_modules