上回项目优化中，原本是jsx文件，那么如果直接使用 jsx语法，应该也是可以的。在简书上还正好有一文章，https://www.jianshu.com/p/138b5b7b0a36，可是没跑起来，可能还是缺什么资源了。
不过从本文描述，提到了一个重要库requirejs-react-jsx,于是就在本地，按照https://npm.taobao.org/package/requirejs-react-jsx这个上面的example试着运行，直接拷贝下来肯定不行。
先来看看jsx语法定义的amd模块
component.js
define([
'react'
],function(React){
return React.createClass({
render:function(){
return(
<div>I am jsx component</div>
);
}
})
});
app.js
注意这里的jsx!,这是必须要的，否则不能用jsx语法
define(["react","jsx!js/component","jsx!js/multi"],function(React,Component,Multi){
function App() {
this.AppView = React.createClass({
render: function () {
return (
<div>
<Component />
<p>Hello world,hello React!</p>
</div>
);
}
});
}
App.prototype.init = function () {
React.render(<this.AppView />, document.body);
};
return App;
});
另外 requirejs支持一个文件里定义多个模块，每个模块必须有name.
multi.js
define('one', function(){
//console.log("i am one");
function showme(){
console.log("i am one");
}
return{
showme:showme
}
});
define('two', function(){
// console.log("i am two");
function showme(){
console.log("i am two");
}
return{
showme:showme
}
});
然后只要在页面上引用 multi.js,就可以在app.js如下访问
注意这里的one,two是模块名
require(['one','two'],function(one,two){
console.log(one,two);
});
项目的代码已经上传
git地址
另外这里说下，关于require.js加载commonjs模块一说http://requirejs.org/docs/api.html#packages 如下实现
card/main.js
exports.app = function(){
console.log('Im an application!');
}
image.png
并不能成功加载。
github上的一个问题
How to load commonjs module from requirejs, document not describe clearly
要想被requirejs加载，可以通过
node r.js -convert path/to/commonjs/modules/ path/to/output
进行转化
或者进行封装如下
define(function(require, exports, module) {
//Put traditional CommonJS module content here
});
下面是该文https://addyosmani.com/writing-modular-js/提到的requirejs amd模块的优点
- Provides a clear proposal for how to approach defining flexible modules.
- Significantly cleaner than the present global namespace and <script> tag solutions many of us rely on. There's a clean way to declare stand-alone modules and dependencies they may have.
- Module definitions are encapsulated, helping us to avoid pollution of the global namespace.
- Works better than some alternative solutions (eg. CommonJS, which we'll be looking at shortly). Doesn't have issues with cross-domain, local or debugging and doesn't have a reliance on server-side tools to be used. Most AMD loaders support loading modules in the browser without a build process.
- Provides a 'transport' approach for including multiple modules in a single file. Other approaches like CommonJS have yet to agree on a transport format.
- It's possible to lazy load scripts if this is needed.
