堆栈内存溢出
  繁体   English   中英

如何用cdn在html中加载es6，react，babel代码？

[英]How to load es6, react, babel code in html with cdn?

 原文  2017-05-12 07:12:28  1   4    javascript/ reactjs/ babeljs

问题描述

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

<script src="https://npmcdn.com/babel-transform-in-browser@6.4.6/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 <

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

4 个解决方案

解决方案1
 19 已采纳  2017-05-12 07:15:46

你需要使用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预处理器 ，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>

解决方案2
 0  2018-12-27 19:41:33

<head>
<title>Beginner's Guide to React</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js">       </script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
    const rootElement = document.getElementById('root');

     const element = React.createElement('div',{className:''},'Hello World' );

     ReactDOM.render(element, rootElement);

</script>

解决方案3
 0  2019-02-21 21:29:58

这是房间里极简主义者的一个更简单的例子： 

 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Minimal Static React</title> <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script> <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script> <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script> </head> <body> <div id='root'></div> <script type='text/babel'> class App extends React.Component { constructor(props) { super(props) this.state = {count: 1} this.increase = this.increase.bind(this) this.decrease = this.decrease.bind(this) } increase() { this.setState({'count': this.state.count+1}) } decrease() { this.setState({'count': this.state.count-1}) } render() { return ( <div> <h1>Count: { this.state.count }</h1> <div onClick={this.increase}>+</div> <div onClick={this.decrease}>-</div> </div> ) } } ReactDOM.render(<App />, document.querySelector('#root')); </script> </body> </html>

解决方案4
 0  2019-06-27 17:18:35

您必须提供适当的脚本来支持React和ES6 +，如下所述：

最后让我们用简单的.html示例总结一下上面提到的 

<html>
<head>
    <!-- https://reactjs.org/docs/cdn-links.html -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- https://babeljs.io/docs/en/next/babel-standalone.html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/babel">
        const App = () => <div>Hello!</div>
        ReactDOM.render(
        <App />, document.getElementById('react-container'))
    </script>
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何告诉作为 CDN 脚本加载的 babel 使用 ES6 模块？ babel loader在React应用程序中无法识别ES6代码 如何使用babel编译用es6编写的我的React文件？ 使用ES6 / Babel进行Karma测试React JSBin：如何获取 ES6/Babel 选项卡？ 如何在加载事件的 html 页面中加载 es6 模块 如何使用 Babel 和 ES6 正确地对 Promise 进行子类化 我是否需要安装 babel 才能在我的 react-app 中编写 ES6 代码？ {React jsx babel es6 webpack}我如何评论渲染（return（// || / ** /））？ 如何使用 babel 以编程方式将 es6 转换为 es5？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM