2015-12-22 5 views
1

Я пытаюсь абстрагироваться мой код и у меня есть следующие два файла в следующей структуреBrowserify/Reactify - Uncaught ReferenceError: функция не определена

main.js 
    components 
    - parent.js 

main.js

require('./components/Parent'); 

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

компоненты/Parent.js

var Parent = React.createClass({ 
    displayName: 'Parent', 
    render: function(){ 
    return (
     <div> 
     <div> This is the parent page. </div> 
     </div> 
    ) 
    } 
}); 

index.html

<div id="app"> 
</div> 

Я бегу следующее -

browserify -t reactify main.js -o main_js.js 

И это Javascript создает

(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){ 
require('./components/Parent'); 

ReactDOM.render(
    React.createElement(Parent, null), 
    document.getElementById('content') 
); 

},{"./components/Parent":2}],2:[function(require,module,exports){ 
var Parent = React.createClass({ 
    displayName: 'Parent', 
    render: function(){ 
    return (
     React.createElement("div", null, 
     React.createElement("div", null, " This is the parent page. ") 
    ) 
    ) 
    } 
}); 

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

Запуск страницы жалуется на линии 5, которая React.createElement(Parent, null),

Uncaught ReferenceError: Parent is not defined 

Но, как вы можете видеть, что файл загружен, так почему он не находит его в файл?

ответ

3

Изменение require('./components/Parent'); в var Parent = require('./components/Parent');

Вы должны указать имя переменной он назначен. Кроме того, если вы размещаете их в разных модулях, вам необходимо экспортировать модуль.

// in ./components/Parent 
module.exports = Parent; 
+0

Похоже, он просто создает родителя в глобальном объеме модуля, то есть он, вероятно, будет работать всякий раз, когда это потребуется. Это все еще делает проблему проблемой, но, возможно, с другим решением. – shennan

+0

@shennan Это отдельный модуль. Browserify связывает отдельные модули с использованием формата CommonJS. Таким образом, модуль должен быть экспортирован и импортирован с использованием семантики. –

+0

Да, точно, вы неотредактированный вопрос не включали код экспорта. Теперь это так. Я прокомментировал перед редактированием. Я почти уверен, что вы это видели. :-) – shennan

Смежные вопросы