2016-10-10 2 views
2

안녕하세요. 다른 jsx에서 구성 요소를 가져 오는 데 문제가 있습니다. 나는 django framework을 사용하여 내 웹 파일을 서비스하고 필요한 모든 도구 (npm, webpack, webpack-bundle-tracker, babel loader, django-webpack loader)를 다운로드했습니다. Webpack 좋은 일자리를 별도의 자바 스크립트 파일을 모두 복용하고 번들로 내 로컬 장고 서버를 렌더링 할 수 있습니다. 문제는 import a component from one jsx into another jsx을 시도 할 때 발생합니다. 내가 볼 수있는 오류가 없지만 내가 가져 오려고하는 자바 스크립트가 장고에로드되지 않습니다.반응에서 구성 요소를 가져 오는 데 문제가 있습니다.

예 : (하는 index.js과 같은 디렉토리에) File:index.js

var React = require('react') 
var ReactDOM = require('react-dom') 
var Body = require('./app.js') 

ReactDOM.render(<Body message="Welcome to my website"/>, document.getElementById('app1')) 

파일 가져 오기 : 내 구성에 문제가 File:app.js

var React = require('react') 
var Body = React.createClass({ 
    getInitialState: function() { 
     return { 
      bodymessage: this.props.message 
     } 
    }, 
    render: function() { 
     return (
      <h1> 
      {this.state.bodymessage} 
      </h1> 
     ) 
    } 
}) 
module.exports = Body; 

있습니까? 이 설정을

PS를 웹팩에

var path = require('path') 
var webpack = require('webpack') 
var BundleTracker = require('webpack-bundle-tracker') 

module.exports = { 
    context: __dirname, 
    entry: './assets/js/index', 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name]-[hash].js', 
    }, 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }) 
    ], 

    module: { 
     loaders: [ 
      {test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react'] 
       } 
      } 
     ] 
    }, 
    resolve: { 
     modulesDirectories: ['node_modules', 'bower_components'], 
     extensions: ['', '.js', '.jsx'] 
    } 
} 
+0

webpack-dev-server를 사용할 때이 기능이 작동합니까? – Pier

+0

아니요.하지만 저는 그것을 다운로드하고 해당 서버를 사용하여 j를 렌더링 해 봅니다. – user6946961

+0

여전히 작동하지 않았습니다. – user6946961

답변

0

   loader: 'babel-loader', 

   loader: 'babel', 

로 교체 시도해보십시오 :

여기 내 webpack.config.js 파일의이 shouldve 댓글을 달았지만하지 않았습니다. 충분한 담당자

관련 문제