如何在HTML文件中包含外部babel js（es 6）文件？
[英]How to include external babel js (es 6) file in html file?
问题描述
我希望将babel js文件包含在html文件中首先看下面的代码
<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文件中。 我怎样才能做到这一点。 我也想知道该文件的扩展名。 请解释。
1 个解决方案
解决方案1
1 2018-11-08 16:10:23
与链接常规外部JavaScript文件类似，只需在相应的脚本标签中添加[type="text/babel"] ，然后在html头中包含[ <script src="babel.min.js"></script> ]。
谢谢。
如何在链接到 html 文件的外部 js 文件中包含 Socket io？
[英]How to include Socket io in external js file linked to html file?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.