/index.html
/js/index.js
/js/app/main/main.js
/js/app/class.js
/js/lib/loader/loader.js/js/app/class.js
/js/app/sum.js
/js/config/require-config.js
/js/lib/requirejs/require.js
/js/config/require-config.js
/js/lib/requirejs/require.js
/js/lib/babel-standalone/babel.js
/js/lib/react/react.js
/js/lib/react/react-dom.js
Файл loader.js
// ECMAScript 6 Babel Loader Plugin
// For Browser
// Define paths:
// requirejs.config({
// config: {
// loader: {
// resolveModuleSource: function (source) {return 'loader!' + source;}
// }
// }
// , paths: {
// loader: 'js/lib/loader/loader'
// , babel: 'js/lib/babel-standalone/babel'
// }
// });
// Then use as a normal RequireJS plugin:
// require(['loader!path/to/my-es6-file'], function (MyEs6File) {
// var myfile = new MyEs6File();
// ...
// });
// or
// define(function () {
// var myfile = new MyEs6File();
// ...
// });
// For Server
// To use your existing client-side AMD modules in node, use global-define and set the path to the ECMAScript 6 Babel 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(['babel'], function(Babel) {
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) {
var url = req.toUrl(name + '.js');
fetchFile(url, function (responseText) {
var code = Babel.transform(responseText, {
presets: ['es2015', 'react']
, filename: 'embedded'
, sourceMaps: 'inline'
}).code;
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;}
}
}
, paths: {
loader: 'js/lib/loader/loader'
, babel: 'js/lib/babel-standalone/babel'
, 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) {
require('loader!class');
var React = require('react')
, ReactDOM = require('react_dom');
ReactDOM.render(<span>Hello World 123</span>, document.getElementById('root'));
});
Файл class.js
define(function (require) {
var sum = 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;
});
return (a, b) => a + b;
});
Комментариев нет:
Отправить комментарий