Question

我正在使用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

Babel-cli转译文件未反映在浏览器中

0 个答案: