我正在使用带有导轨和链轮的webpack . 通过gem react-rails添加React . 我一直在收到错误
greet.self-c872e41….js?body=1:1 Uncaught ReferenceError: exports is not defined(anonymous function)
main.self-8ac2c1a….js?body=1:11 Uncaught ReferenceError: require is not defined
所以它仍然从我的greet文件 app/assets/javascripts/components/main.jsx 和 greet.jsx 读取的事实对我来说似乎是一个问题，从我对webpack的理解是你希望它从导出的bundle.js文件中读取 .
我的rails视图如下所示： app/views/home/index.html.erb
<div id="react"></div>
<%= react_component("Main") %>
app/assets/javascripts/components/main.jsx
import Greet from './greet'
class Main extends React.Component {
render() {
return (
<Greet />
)
}
}
app/assets/javascripts/components/greet.jsx
export default class Greet extends React.Component {
render() {
return <h2>Hello There</h2>
}
}
我的Webpack文件如下所示： webpack.config.js
module.exports = {
entry: "./app/assets/javascripts/components/main.jsx",
output: {
path: __dirname + "/app/assets/javascripts",
filename: "bundle.js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel",
query: { presets:['es2015', 'react'] }
}
],
},
};
而我的 app/assets/javacsripts/application.js
//= require jquery
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .
如果我删除导入和导出调用它工作正常，但我正在关注的教程使用它们 . 当我删除 components 目录，并且只需要 bundle.js 文件时，我从react-rails获得错误 .
Main is not defined
我对如何识别调用导入和导出感到茫然 . 我知道这是关于ES6的东西，但我认为webpack可以解决这个问题 .
greet.jsx，main.jsx和bundle.js都在我浏览器的网络选项卡中调用 .