如何使用CDN在HTML中加载ES6，React，Babel代码？
我有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 <
有什么必要的CDN脚本文件将此反应代码加载到HTML？
问题答案：
您需要使用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>
-
本文向大家介绍react开发中如何使用require.ensure加载es6风格的组件，包括了react开发中如何使用require.ensure加载es6风格的组件的使用技巧和注意事项，需要的朋友参考一下 其实用的babel，在浏览器端就应该可以加载，之前少了个default： 以下方式也可以，但是比较low，可以作废了： 1、问题提出：想通过require.ensure加载es6风格的模块？
-
我有一个xml文件，想要加载一些网页。如何这样做。
-
我正在尝试在反应加载之前添加一个闪屏。 因为我使用的是react脚本/react-app，所以我的index.tsx只有以下部分： 我试着在同一个页面上添加我自己的div，但它没有显示出来。 我想显示一个简单的空白屏幕与我的飞溅图像在1秒定时器之前的反应加载，以避免/隐藏渲染元素的移动。 **如果我确实在app.tsx中添加了屏幕，则在屏幕加载之前会发生移动 更新 正如Rishabh在下面指出的，
-
使用 https://cdn.jsdelivr.net/npm/react@18.3.1/+esm 有问题不报错。 官方示例，下面的是正常的。会报一个未使用 key 的错误。
-
本文向大家介绍webpack使用 babel-loader 转换 ES6代码示例，包括了webpack使用 babel-loader 转换 ES6代码示例的使用技巧和注意事项，需要的朋友参考一下 本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下： 查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com （一）安装
-
我想用cdn的axios 但是我得到了一个错误：拒绝加载脚本的https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'因为它违反了以下内容安全策略指令：“script src'self'”。请注意，未显式设置“script src elem”，因此将“script src”用作回退。