Question

我正在使用带有导轨和链轮的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

所以它仍然是从我的问候文件 app / assets / javascripts / components / main.jsx 和 greet.jsx 中读取的事实似乎是一个问题我，从我对webpack的理解是你希望它从导出的bundle.js文件中读取。

我的rails视图如下所示： 应用/视图/家/ index.html.erb

<div id="react"></div>
<%= react_component("Main") %>

应用/资产/ Javascript角/组件/ main.jsx

import Greet from './greet'

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

应用/资产/ Javascript角/组件/ 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都在我浏览器的网络标签中调用。

使用带有Rails资产管道的webpack

0 个答案: