React js 应用程序流程（2 个不同版本 - 只有 1 个有效）

Question

我试图了解以下两个文档流之间的区别，以及为什么第一个有效而第二个无效。

所以有效的版本只有文件：

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import fullcalendar from 'fullcalendar';
import jqueryUI from 'jquery-ui';

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof    Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Application = function (_React$Component) {
_inherits(Application, _React$Component);

function Application() {
    _classCallCheck(this, Application);

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}

Application.prototype.render = function render() {
    return React.createElement(
        'div',
        null,
        React.createElement(External, null),
        React.createElement(Calendar, null)
    );
};

return Application;
}(React.Component);

/*
 * A simple React component
 */

var Calendar = function (_React$Component2) {
_inherits(Calendar, _React$Component2);

function Calendar() {
    _classCallCheck(this, Calendar);

    return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}

Calendar.prototype.render = function render() {
    return React.createElement('div', { id: 'calendar' });
};

Calendar.prototype.componentDidMount = function componentDidMount() {
            var date = new Date();
    var d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear();

    $('#calendar').fullCalendar({
      defaultView:'agendaWeek',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay',
      },
      minTime: "07:00:00",
      maxTime: "21:00:00",
      selectHelper: true,

      buttonText: {
        today: 'today',
        month: 'month',
        week: 'week',
        day: 'day'
      },
      //Random default events
      events: [
        {
          title: 'All Day Event',
          start: new Date(y, m, 1),
          backgroundColor: "#f56954", //red
          borderColor: "#f56954" //red

        },
        {
          title: 'Long Event',
          start: new Date(y, m, d - 5),
          end: new Date(y, m, d - 2),
          backgroundColor: "#f39c12", //yellow
          borderColor: "#f39c12" //yellow

        },
        {
          title: 'Meeting',
          start: new Date(y, m, d, 10, 30),
          allDay: false,
          backgroundColor: "#0073b7", //Blue
          borderColor: "#0073b7" //Blue
        },
        {
          title: 'Lunch',
          start: new Date(y, m, d, 12, 0),
          end: new Date(y, m, d, 14, 0),
          allDay: false,
          backgroundColor: "#00c0ef", //Info (aqua)
          borderColor: "#00c0ef" //Info (aqua)

        },
        {
          title: 'Birthday Party',
          start: new Date(y, m, d + 1, 19, 0),
          end: new Date(y, m, d + 1, 22, 30),
          allDay: false,
          backgroundColor: "#00a65a", //Success (green)
          borderColor: "#00a65a" //Success (green)
        },
        {
          title: 'Click for Google',
          start: new Date(y, m, 28),
          end: new Date(y, m, 29),
          url: 'http://google.com/',
          backgroundColor: "#3c8dbc", //Primary (light-blue)
          borderColor: "#3c8dbc" //Primary (light-blue)
        }
      ],
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar !!!
      drop: function (date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;
        copiedEventObject.backgroundColor = $(this).css("background-color");
        copiedEventObject.borderColor = $(this).css("border-color");

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove();
        }

      }
    });
};

return Calendar;
}(React.Component);

var External = function (_React$Component3) {
_inherits(External, _React$Component3);

function External() {
    _classCallCheck(this, External);

    return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}

External.prototype.render = function render() {
    return React.createElement(
        'div',
        { id: 'external-events' },
        React.createElement(
            'h4',
            null,
            'Draggable Events'
        ),
        React.createElement(
            'div',
            { className: 'fc-event' },
            'My Event 1'
        ),
        React.createElement(
            'div',
            { className: 'fc-event' },
            'My Event 2'
        ),
        React.createElement(
            'div',
            { className: 'fc-event' },
            'My Event 3'
        ),
        React.createElement(
            'div',
            { className: 'fc-event' },
            'My Event 4'
        ),
        React.createElement(
            'div',
            { className: 'fc-event' },
            'My Event 5'
        ),
        React.createElement(
            'p',
            null,
            React.createElement('input', { type: 'checkbox', id: 'drop-remove' }),
            React.createElement(
                'label',
                { 'htmlFor': 'drop-remove' },
                'remove after drop'
            )
        )
    );
};

External.prototype.componentDidMount = function componentDidMount() {
    $('#external-events .fc-event').each(function () {

        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });

        // make the event draggable using jQuery UI
        //$(this).draggable({
    //      zIndex: 999,
    //      revert: true, // will cause the event to go back to its
        //  revertDuration: 0 //  original position after the drag
        //});
    });
};

return External;
}(React.Component);

/*
 * Render the above component into the div#app
 */

ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));

当我将其拆分为后续流程时，它停止工作：

main.js -> routes.js -> app.js

(1) 新的 main.js

import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import configureStore from './store/configureStore';
import getRoutes from './routes';
import jQuery from 'jquery';

const store = configureStore(window.INITIAL_STATE);

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={getRoutes(store)}/>
  </Provider>,
  document.getElementById('app')
);

(2) routes.js（未显示所有代码）

 return (
    <Route path="/" component={App}>
    </Route>
  );
}

(3) app.js

与第一个流程中的 MAIN.JS 相同，除了最后一行

发件人：

ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));

收件人：

return React.createElement(Application, null);

收到的错误是：

 $.fn.fullCalendar = function(options) {
                  ^

TypeError: Cannot set property 'fullCalendar' of undefined

我是新手，但我仍在努力学习一切。我很确定我忽略了一些非常小的东西，希望得到任何帮助！

Answer 1

第一个版本是你的完整包文件（main.js），其中包含完整的代码（所有代码由 babel 转译）

第二个流程是 Es6 单个文件，必须转换并捆绑到一个文件或多个块中。

这些 ES6 文件有一个入口点，比如说 main.js 。这个 main.js 导入其他文件等等。 要运行到浏览器中，这些文件需要被转译和捆绑