Question

我根据此处的文档使用django-pipeline和browserify -

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>
    )
  }
});

parent.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')
);

Answer 1

@ 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>
    )
  }
});

<强> parent.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')
);

此外，虽然不是必需的，但最好为Component文件指定大写名称，就像在Java中分类文件一样。大多数应用也会将根文件命名为app.js或main.js或类似的东西，而不是build.browserify.js这有点模糊，因为从技术上讲，该文件与构建或使用Browserify无关

未捕获的ReferenceError：未定义Parent

1 个答案: