requirejs+jsx再会

上回项目优化中，原本是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(
                
I am jsx component
            );
       }
   })
});

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 (
          

            
            
Hello world,hello React!
          
        );
      }
    });
  }
 
  App.prototype.init = function () {
    React.render(, 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