Файл Babel-Cli не отображается в браузере - PullRequest
Новая
       6

Файл Babel-Cli не отображается в браузере

0 голосов
/ 26 января 2019

Я использую babel для компиляции данных JSX, и данные компилируются в файле app.js.Но каждый раз, когда я включаю систему, передаваемые данные не отображаются в браузере. Я даже пытался очистить кеш.Это помогло в первый раз, но теперь это тоже не помогает.

Я использую следующую команду: 

babel testapp.js --out-file=app.js --presets=env,react

где testapp.js - исходный файл.

Это файл testapp.js. 

const App={
        title:'App',
        options :['One','Two']
}


const template=(
            <div>
                <h1>{App.title}</h1>
                { App.subtitle && <p> {App.subtitle }</p>}
                <p>{ App.options.length > 0 ? 'We Have Stocks' : 'Out of Stock' }</p>
            </div>);



const user={
        name : 'Sujay Prabhu',
        age :22 ,
        place : 'Kumta'
}

function getlocation(place){
        if(place){
        return <p>Location : {place}</p>;
}
}


const template2=(
<div>
        <h1>{user.name}</h1>
        <p>Age : {user.age} </p>
        {getlocation(user.place)}
</div>
);

const appRoot = document.getElementById('app');

ReactDOM.render(template,appRoot);

Это файл app.js 

'use strict';

var App = {
        title: 'App',
        options: ['One', 'Two']
};

var template = React.createElement(
        'div',
        null,
        React.createElement(
                'h1',
                null,
                App.title
        ),
        App.subtitle && React.createElement(
                'p',
                null,
                ' ',
                App.subtitle
        ),
        React.createElement(
                'p',
                null,
                App.options.length > 0 ? 'We Have Stocks' : 'Out of Stock'
        )
);

var user = {
        name: 'Sujay Prabhu',
        age: 22,
        place: 'Kumta'
};

function getlocation(place) {
        if (place) {
                return React.createElement(
                        'p',
                        null,
                        'Location : ',
                        place
                );
        }
}

var template2 = React.createElement(
        'div',
        null,
        React.createElement(

             'h1',
                null,
                user.name
        ),
        React.createElement(
                'p',
                null,
                'Age : ',
                user.age,
                ' '
        ),
        getlocation(user.place)
);

var appRoot = document.getElementById('app');

ReactDOM.render(template, appRoot);

Это файл index.html 

<!DOCTYPE html>

<html>

        <head>

                <title>App</title>

        </head>

        <body>

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

                <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>

                <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>

                <script src="app.js"></script>

        </body>

</html>

Мой браузерВывод: 

App 
We Have Stock

Ожидаемый вывод: 

App
We Have Stocks
...