Babel-RequireJS模塊同步加載器
Babel-Require是一個CMD規(guī)范的js模塊同步加載器，其本質(zhì)是一個類似NodeJS的"require()"函數(shù)。
在瀏覽器中使用Babel動態(tài)編譯運行ECMScript2015，如果包含import關(guān)鍵字則會報錯，此函數(shù)庫設(shè)計用于解決該問題。讓開發(fā)者不用編譯即可直接在瀏覽器中import ECMScript2015 js模塊, 目前支持Babel5.x。
使用同步AJAX實現(xiàn)，單線程下載，只能用于開發(fā)調(diào)試， 當(dāng)import文件較多時會稍慢。
在線例子：
http://wmlgl.github.io/babel-require/examples/
配置：
加載模塊時，如果配置了jsx，并且該模塊屬于jsx項配置的目錄下，則加載".jsx"文件，否則加載".js"文件。 Config exmaple:
<script type="text/javascript">
require.config({
jsx: ["app"]
});
</script>
<script type="text/babel">
// 會加載"app/app.jsx"
// Will be load "app/app.jsx"
import App from "app/app";
// 會加載"lib/hello.js"
// Will be load "lib/hello.js"
import Hello from "lib/hello";
</script>
示例：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Examples</title>
<script src="lib/react/react.js"></script>
<script src="lib/react/react-dom.js"></script>
<script src="lib/babel-core/browser.js"></script>
<script src="lib/babel-core/browser-polyfill.js"></script>
<script src="dest/babel-require.js"></script>
</head>
<body>
<div id="container">loading...</div>
</body></html><script type="text/babel">
import App from "app/app";
ReactDOM.render(<App/>, document.getElementById('container'));</script>
// file: app/app.jsx
import Test1 from './loadtest1/test1'
import Test2 from './loadtest2/test2'
export default class App extends React.Component {
render () {
return (
<div>
Hello App!
<Test1 />
<Test2 />
</div>
);
}
}評論
圖片
表情