1

我正在使用带有导轨和链轮的 webpack。React 是通过 gem react-rails 添加的。我不断收到错误

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

所以它仍然从我的问候文件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") %>

应用程序/资产/javascripts/components/main.jsx

import Greet from './greet'

class Main extends React.Component {
  render() {
    return (
      <Greet />
    )
  }
}

应用程序/资产/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 .

如果我删除导入和导出调用它工作正常，但我正在遵循的教程使用它们。当我删除组件目录并且只需要bundle.js文件时，我从 react-rails 收到错误消息。

Main is not defined

我不知道如何识别调用导入和导出。我知道这与 ES6 有关，但我认为 webpack 应该可以解决这个问题。

greet.jsx、main.jsx 和 bundle.js 都在我浏览器的网络选项卡中被调用。

4

0 回答 0