Структура расположения папок и файлов:
/index.html
/source/css/index.css
/source/js/config/systemjs-config.js
/source/js/index.js
/source/js/app/view/view.html
/source/js/app/sum/sum.js
/source/js/app/render/render.js
/source/js/lib/react/react.js
/source/js/lib/react/react-dom.js
/source/js/lib/systemjs/system.src.js
/source/js/lib/systemjs/text.js
/source/js/lib/systemjs/css.js
/source/js/lib/systemjs/plugin-babel.js
/source/js/lib/systemjs/systemjs-babel-browser.js
/source/js/lib/systemjs/regenerator-runtime.js
/source/js/lib/systemjs/babel-helpers.js
/source/js/lib/systemjs/babel-helpers/ - папка с файлами
Файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="source/js/lib/systemjs/system.src.js"></script>
<script type="text/javascript" src="source/js/config/systemjs-config.js"></script>
<title>SystemJS and Babel</title>
</head>
<body>
<div id="root"></div>
<div id="message"></div>
<script type="text/javascript">SystemJS.import('js/index.js');</script>
</body>
</html>
Файл systemjs-config.js
SystemJS.config({
baseURL: 'source'
, map: {
'plugin-babel': 'js/lib/systemjs/plugin-babel.js'
, 'systemjs-babel-build': 'js/lib/systemjs/systemjs-babel-browser.js'
, 'text': 'js/lib/systemjs/text.js'
, 'css': 'js/lib/systemjs/css.js'
}
, transpiler: 'plugin-babel'
, meta: {
'*.js': {
babelOptions: {
stage1: true
, react: true
}
}
, '*.css': {loader: 'css'}
, '*.html': {loader: 'text'}
}
, paths: {
'react': 'js/lib/react/react.js'
, 'react-dom': 'js/lib/react/react-dom.js'
, indexStyle: 'style/default/index.css'
, view: 'app/view/view.html'
, sum: 'app/sum/sum.js'
, render: 'app/render/render.js'
}
});
Файл index.css
div#root {font-size: 50px;}
Файл index.js
import 'indexStyle';
import view from 'view';
import render from 'render';
import {sum} from 'sum';
document.getElementById('message').innerHTML = view;
render();
alert(sum(1, 2););
Файл view.html
<p>World</p>
Файл render.js
import React from 'react';
import ReactDOM from 'react-dom';
export default () => {
ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'));
};
Файл sum.js
export function sum (a, b) {return a + b;}
Комментариев нет:
Отправить комментарий