2017-10-20 320 views
0

我想包括在HTML文件通天js文件 的代码首先看下面如何在html文件中包含外部babel js(es 6)文件?

<html> 
 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script> 
 
</head> 
 
<body> 
 
    <div id='root'></div> 
 
    <script type='text/babel' > 
 
    class SetTimer extends React.Component{  
 
    render(){ 
 
    return ( 
 
    <div className="set-timer">work <br/> session   
 
    <div className="minus-add"> 
 
     <button className="setting-button" id="minus-timer" onClick={this.props.minus}>-</button> 
 
     <button className="setting-button" id="add-timer" onClick={this.props.add}>+</button> 
 
    </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
class SetBreak extends React.Component{ 
 

 
render(){ 
 
return ( 
 
<div className="set-break"> break<br/> session 
 
    <div className="minus-add"> 
 
    <button className="setting-button" id="minus-break" onClick={this.props.minusbreak}>-</button> 
 
    <button className="setting-button" id="add-break" onClick={this.props.addbreak}>+</button> 
 
    </div> 
 
</div> 
 
); 
 
} 
 
} 
 

 
const leftPad = (time)=>{ 
 
return (time<10)? '0'+time :time 
 
} 
 
const TimerDisplay = (props) => ( 
 
<div className="timer-display"><span className="worklabel">Work session time</span><br/> 
 
    {props.currentTime} 
 
    <div className="breaktime"><span className="breaklabel">break session time</span><br/>{props.breakTime}</div> 
 
</div> 
 
); 
 
// let baseTime= 25; 
 
class App extends React.Component { 
 
constructor(){ 
 
super(); 
 
this.state = { 
 
baseTime:25, 
 
breakTime:5, 
 
currentTime: moment.duration(25,'minutes'), 
 
timer:null, 
 
startbuttonvisible:true, 
 
pausebuttonvisible:false, 
 
resumebuttonvisible:false, 
 
stopbuttonvisible:false, 
 
} 
 
this.minus =this.minus.bind(this); 
 
this.add =this.add.bind(this); 
 
this.minusbreak =this.minusbreak.bind(this); 
 
this.addbreak =this.addbreak.bind(this); 
 
this.startTimer = this.startTimer.bind(this); 
 
this.pauseTimer = this.pauseTimer.bind(this); 
 
this.resumeTimer = this.resumeTimer.bind(this); 
 
this.stopTimer = this.stopTimer.bind(this); 
 
this.reduceTimer = this.reduceTimer.bind(this); 
 

 
} 
 
add(){ 
 
this.setState({ 
 
baseTime:this.state.baseTime+1 
 
}); 
 
} 
 
minus(){ 
 
this.setState({ 
 
baseTime:this.state.baseTime-1 
 
}); 
 
} 
 
addbreak(){ 
 
this.setState({ 
 
breakTime:this.state.breakTime+1 
 
}); 
 
} 
 
minusbreak(){ 
 
this.setState({ 
 
breakTime:this.state.breakTime-1 
 
}); 
 
} 
 
startTimer(){ 
 
this.setState({ 
 
timer: setInterval(this.reduceTimer, 1000), 
 
startbuttonvisible:false, 
 
pausebuttonvisible:true, 
 
stopbuttonvisible:true, 
 
});  
 
} 
 
pauseTimer(){ 
 
clearInterval(this.state.timer); 
 
this.setState({  
 
pausebuttonvisible:false, 
 
resumebuttonvisible:true, 
 
});  
 
} 
 
resumeTimer(){ 
 
this.setState({ 
 
timer: setInterval(this.reduceTimer, 1000), 
 
startbuttonvisible:false, 
 
pausebuttonvisible:true, 
 
stopbuttonvisible:true, 
 
resumebuttonvisible:false, 
 
}); 
 
} 
 
stopTimer(){ 
 
clearInterval(this.state.timer); 
 
this.setState({ 
 
baseTime:25, 
 
timer: null, 
 
startbuttonvisible:true, 
 
pausebuttonvisible:false, 
 
stopbuttonvisible:false, 
 
resumebuttonvisible:false, 
 
}); 
 
} 
 
reduceTimer(){ 
 
if(this.state.baseTime === 0) return; 
 
const newTime = this.state.baseTime - 1; 
 
this.setState({ 
 
baseTime: newTime, 
 
}); 
 
} 
 
render() { 
 

 
return (
 
<div className="container"> 
 
<div className="timebox"> 
 
    <div className="header"> 
 
    Pomodoro Clock 
 
    </div> 
 
    <TimerDisplay currentTime={this.state.baseTime} breakTime={this.state.breakTime}/> 
 
    <div id="action-title"> 
 
    <small>SETTINGS</small> 
 
    </div> 
 
    <div className="actions"> 
 
    <SetTimer minus={this.minus} add={this.add}/> 
 
    <SetBreak minusbreak={this.minusbreak} addbreak={this.addbreak}/> 
 
    </div> 
 
    <div className="timer-control"> 
 
    {this.state.startbuttonvisible ? <button id="start-timer" onClick={this.startTimer}> 
 
     START 
 
    </button> : null} 
 
    {this.state.pausebuttonvisible ? <button id="pause-timer" onClick={this.pauseTimer}> 
 
     PAUSE 
 
    </button>: null} 
 
    {this.state.resumebuttonvisible ? <button id="resume-timer" onClick={this.resumeTimer}> 
 
     RESUME 
 
    </button>: null} 
 
    {this.state.stopbuttonvisible ? <button id="stop-timer" onClick={this.stopTimer}> 
 
     STOP 
 
    </button>: null} 
 
    </div> 
 
</div> 
 
</div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
<App />, 
 
document.getElementById('root') 
 
); 
 
</script> 
 
</body> 
 
</html>

此代码的工作script标签之间的细微 看代码。我希望将script之间的代码放在单独的文件中,并将该文件包含在html文件中,因为我们将简单的js文件直接包含在html文件中。我怎样才能做到这一点。我也想知道该文件应该是什么扩展名。请解释。

+0

请忽略拼写和语法错误。 –

+0

为什么不将它转换为es5或es3,然后将其作为常规脚本文件链接? – lumio

回答

-1

您可以指定类型:<script type="text/babel" src="/external-file.js"></script>