0

我根据此处的文档使用 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>
    )
  }
});

父.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 个错误-

我的 child.js 和 parent.js 文件都在第 4 行发生以下情况 -

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 回答