0

ここのドキュメントに基づいて、browserifyとともにdjango-pipelineを使用しています-

http://gregblogs.com/how-django-reactjs-and-browserify/

このようにNPM/Bowerパッケージをロードすると、完全に正常に動作します-

'build_js': {
    'source_filenames': (
        'js/bower_components/jquery/dist/jquery.js',
        'bootstrap/js/bootstrap.js',
        'js/bower_components/react/react-with-addons.js',
        'js/bower_components/react/react-dom.js',
        'datatables/js/jquery.dataTables.js',
        'datatables/js/dataTables.bootstrap.js',
        'js/node_modules/marked/marked.min.js',
        'js/node_modules/react-router/umd/ReactRouter.js',
        'js/child.js',
        'js/parent.js',
        'js/build.browserify.js',
    ),
    'output_filename': 'js/build_js.js',

問題は、build.browserify.js 内で child.js と parent.js を参照しようとしていることです。

これは3つのファイルの内容です -

child.js

var Child = React.createClass({
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

親.js

var Parent = React.createClass({
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

build.browserify.js

ReactDOM.render(
  <Parent />,
  document.getElementById('content')
);

ブラウザで実際に3つのエラーが発生します-

以下は、4 行目の child.js ファイルと parent.js ファイルの両方で発生します。

Uncaught SyntaxError: Unexpected token <

そして、3行目のbuild.browserify.browserified.jsでこれを取得します

Uncaught ReferenceError: Parent is not defined

これはそのファイルの内容です -

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
ReactDOM.render(
  React.createElement(Parent, null),
  document.getElementById('content')
);

},{}]},{},[1]);

編集 -

このようにすべてのコードを単一の build.browserify.js ファイルに入れると、機能します-

var Child = React.createClass({
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

var Parent = React.createClass({
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);
4

1 に答える 1

2

@ taylorc93はこれで正しい軌道に乗っていますが、追加のステップがありません.

require('./parent')親モジュールを含めたい任意のファイルで行う必要があることに加えて、parent.jsファイルの内容を実際にエクスポートする必要もあります。したがって、次のparent.jsようになります。

child.js

var React = require('react');

modules.export = React.createClass({
  displayName: 'Child', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

親.js

var React = require('react');
var Child = require('./child');

modules.export = React.createClass({
  displayName: 'Parent', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

build.browserify.js

var ReactDOM = require('react-dom');
var Parent = require('./parent');

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

また、必須ではありませんが、Java でクラス ファイルを作成する場合と同様に、コンポーネント ファイルに大文字の名前を付けることをお勧めします。ほとんどのアプリでは、ルート ファイルに「app.jsまたはmain.js」などの名前を付けますbuild.browserify.jsが、技術的には、このファイルはビルドや Browserify とは関係がないため、少しあいまいです。

于 2015-12-22T19:46:03.073 に答える