RequireJS Loader Plugin for TypeScript

Структура расположения папок и файлов:

/index.html

/js/index.js

/js/app/main/main.js
/js/app/class.js
/js/app/sum.js

/js/config/require-config.js

/js/lib/requirejs/require.js
/js/lib/loader/loader.js

/'js/lib/typescript/typescriptServices.js

/js/lib/react/react.js
/js/lib/react/react-dom.js

Файл loader.js

// TypeScript Loader Plugin

// For Browser

// Define paths:

// requirejs.config({
//       config: {
//           loader: {
//               resolveModuleSource: function (source) {return 'loader!' + source;}
//           }
//       }
//     , paths: {
//           loader: 'js/lib/loader/loader'
//         , typescript: 'js/lib/typescript/typescriptServices'
//       }
// });

// Then use as a normal RequireJS plugin:

// require(['loader!path/to/my-typescript-file'], function (MyTypescriptFile) {
//     var myfile = new MyTypescriptFile();
//     ...
// });

// or

// define(function () {
//     var myfile = new MyTypescriptFile();
//     ...
// });

// For Server

// To use your existing client-side AMD modules in node, use global-define and set the path to the TypeScript Loader Plugin.
// This so that when RequireJS tries to resolve the module name, it maps to the correct package.

// require('global-define')({
//       basePath: __dirname
//     , paths: {
//           loader: 'js/lib/loader/loader'
//       }
// });

define(['typescript'], function (ts) {

    var buildMap = {}
        , fetchFile
        , fs;

    function isBrowser () {return typeof window !== 'undefined' && window.navigator && window.document;}
    function isNode () {return typeof process !== 'undefined' && process.versions && !!process.versions.node;}
    function isRequireBuildProcess () {return isNode() && require.nodeRequire;}

    if (isBrowser()) {
        fetchFile = function (url, callback) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new window.ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {callback(xhr.responseText);} // Do not explicitly handle errors, those should be visible via console output in the browser.
            };
            xhr.send(null);
        };
    } else if (isRequireBuildProcess()) {
        fs = require.nodeRequire('fs'); // nodeRequire is a method added by r.js
        fetchFile = function (path, callback) {
            callback(fs.readFileSync(path, 'utf8'));
        };
    } else if (isNode()) {
        fs = require('fs');
        fetchFile = function (path, callback) {
            callback(fs.readFileSync(path, 'utf8'));
        };
    }

    return {
          load: function (name, req, onload, config) {
            if (!window.exports) {window.exports = {};}
            var url = req.toUrl(name + '.js');
            fetchFile(url, function (responseText) {
                var code = ts.transpileModule(responseText, {
                      compilerOptions: {
                          module: 'none' // 'amd' or ts.ModuleKind.AMD
                        , target: 'es3' // ts.ScriptTarget.ES3

                        , noImplicitUseStrict: true

                        , noEmitHelpers: true

                        , removeComments: true

                        , sourceMap: true
                        , inlineSourceMap: true
                        , inlineSources: true

                        , jsx: 'react'

                        , importHelpers: true
                      }
                    , moduleName: ''
                }).outputText;
                if (code === undefined) {throw new Error('Output generation failed');}
                if (config.isBuild) {buildMap[name] = code;}
                if (isNode() && !config.isBuild) {
                    var fileName = name + '.tmp';
                    fs.writeFileSync(fileName, code);
                    onload(req(fileName));
                    fs.unlink(fileName);
                } else {
                    onload.fromText(code);
                }
            });
          }
        , write: function (pluginName, moduleName, write) {
            if (moduleName in buildMap) {write.asModule(pluginName + '!' + moduleName, buildMap[moduleName]);}
          }
    };

});

Файл index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="js/lib/requirejs/require.js"></script>
    <script src="js/config/require-config.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/index.js"></script>
  </body>
</html>

Файл require-config.js

requirejs.config({
      config: {
          loader: {
              resolveModuleSource: function (source) {return 'loader!' + source;}
          }
      }
    , shim: {
          typescript: {exports: 'ts'}
      }
    , paths: {
          loader: 'js/lib/loader/loader'
        , typescript: 'js/lib/typescript/typescriptServices'
        , react: 'js/lib/react/react'
        , react_dom: 'js/lib/react/react-dom'

        , 'main': 'js/app/main/main'
        , 'class': 'js/app/class/class'
        , 'sum': 'js/app/sum/sum'
      }
});

Файл index.js

require(['loader!main']);

Файл main.js

define(function (require) {
    var React = require('react')
        , ReactDOM = require('react_dom');
    require('loader!class');
    ReactDOM.render(<span>Hello World 123</span>, document.getElementById('root'));
});

Файл class.js

define(function (require) {

    const sum: any = require('loader!sum');

    console.log(sum(1, 2));

    class A {
        constructor (a) {
            console.log('Hello ' + a);
        }
    }

    new A('world!');

});

Файл sum.js

define(function (require) {

    return (a, b) => a + b;

});