Блог

Главная - Вопросы по программированию - script.onload файл JSX

script.onload файл JSX

#javascript #load #onload #jsx

#javascript #нагрузка #загрузка #jsx

Вопрос:

У меня проблема, когда я пытаюсь загрузить файл JSX с помощью встроенной функции js и события script.onload.

В моем HTML-файле внутри тега HEAD у меня есть только один скрипт для загрузки:

 <script src="js/01_jquery-1.12.2.min.js" defer></script>

Затем в теле у меня есть этот скрипт, который загрузит все остальные файлы JS и JSX

 window.onload = function onLoad() {
    function getScriptFile(inFile, scriptType, qname) {
        ....
    }

    function loadJsQ(inObj) {
       ....
    }

    // lib js
    loadJsFiles({file: 'js/jquery-ui.min.js'});
    loadJsFiles({file: 'js/bootstrap.js'});
    loadJsFiles({file: 'js/babel-core-5-8-34-browser.js'});
    loadJsFiles({file: 'js/react-with-addons.js'});
    loadJsFiles({file: 'js/react-dom.js'});

    //class app
    loadJsFiles({file: 'classes/User.js'});
    loadJsFiles({file: 'classes/MainApplication.js'});

    //jsx
    loadJsFiles({file: 'jsx/mainReact.jsx', type: "text/babel"});

    //
    $(document).dequeue('queueLoadJsFiles');
};

Функции внутри window.onload являются:

 function getScriptFile(inFile, scriptType, qname) {
    var scriptType = scriptType || false;
    var script = document.createElement('script');

    if(scriptType){
        script.type = scriptType;
    }

    document.head.appendChild(script);

    script.onload = script.onreadystatechange = function( _, isAbort ) {
        console.log("script",script);

        if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
            script.onload = script.onreadystatechange = null;
            script = undefined;

            if(!isAbort) {
                console.log("Script is loaded", inFile);
                setTimeout(function () {
                    $(document).dequeue(qname);
                }, 100)
            }
        }
    };

    script.src = inFile;
}

Следующая функция:

 function loadJsQ(inObj) {
    var qname = "queueLoadJsFiles";
    $(document).queue(qname, function() {
        var inFile = inObj.file,
            inType = inObj.type || false;

        getScriptJQueryQueue(inFile, inType, qname);
    });
}

Все загружается и проверяется через консоль, но jsx не выполняется.

Мой файл MainReact.jsx

 //file jsx/mainReact.jsx
"use strict";

console.log("is ok in JSX???");

const SomeComponent = React.createClass({
....
});


const MainApp = React.createClass({
....
});


{

    ReactDOM.render(
        <MainApp />,
        document.getElementById('mainAppCont')
    );

    let app = new MainApp();
}

Мои файлы классов — это

 //file classes/User.js

class User{
    constructor(){...}

    ...
}

И

 //file classes/MainApplication.js

class MainApplication{
    constructor(){...}

    ...
}

Прежде чем задать свой вопрос, я должен сказать, что когда я загружаю все файлы js и jsx через HEAD, это работает.

Мой вопрос в том, почему я не могу загрузиться таким образом через getScriptFile. Загружается все, кроме файла jsx? Не могли бы вы помочь мне решить эту проблему? Мне нужно загрузить через getScriptFile.

В конце концов, ГОЛОВА выглядит вот так:

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta http-equiv="pragma" content="no-cache">

    <title>Title</title>

    <!-- CSS LIBS -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/flags.css">

    <!-- JS LIBS -->

    <script src="js/jquery-1.12.2.min.js" defer=""></script>

    <!-- added via getScript -->
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/babel-core-5-8-34-browser.js"></script>
    <script src="js/react-with-addons.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="classes/User.js"></script>
    <script src="classes/MainApplication.js"></script>
    <script type="text/babel" src="jsx/mainReact.jsx"></script>

</head>

Строка кода в файле JSX, вверху console.log («все в порядке в JSX ???»); не будет выполнена…
Все файлы на месте, и в консоли нет никаких ошибок.

🙁

Заранее благодарю вас!

Комментарии:

1. Вам нужно заставить Babel перенести эти файлы.

2. Спасибо, СЛаки, я это сделал. но есть ли какой-нибудь способ загрузить jsx подобным образом?

Метки: