如何使用CDN在HTML中加载ES6，React，Babel代码？

小编典典

如何使用CDN在HTML中加载ES6，React，Babel代码？

reactjs

我有Codepen代码，我正尝试仅使用三个文件index.html，main.js和style.css在网页上复制它们。我尝试将这些脚本加载到HTML文件的head标签上。

<script src="https://npmcdn.com/[email protected]/dist/btib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>

但是，它不起作用。我得到的只是这个错误

Uncaught SyntaxError: Unexpected token <

有什么必要的CDN脚本文件将此反应代码加载到HTML？

阅读 704

2020-07-22

共1个答案

小编典典

您需要使用babel standalone脚本来反编译代码，并且需要包含的脚本react and react-dom，使用它们可以正常工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<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>

它与Codepen配合使用的原因： 检查设置/ JavaScript，您会发现babel被选择为 JavaScript
Preprocessor ，codepen自动包含了脚本，但是要在本地运行这些文件，您需要包含standalone script。

更新：

1-您需要在呈现反应代码的div之后定义脚本，否则它将引发错误。像这样：

<body> 
   <div id="root"></div> 
   <script type="text/babel" src="pomodoro.js"></script>
</body>

2-使用ReactDOM.render代替React.render。

检查工作代码：

<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>

2020-07-22