init
This commit is contained in:
commit
672e09abb5
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
node_modules/
|
||||||
161
exampleApp/example.js
Normal file
161
exampleApp/example.js
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
|
module.exports = factory(require("react"), require("react-dom"));
|
||||||
|
else if(typeof define === 'function' && define.amd)
|
||||||
|
define(["react", "react-dom"], factory);
|
||||||
|
else {
|
||||||
|
var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
|
||||||
|
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
|
||||||
|
}
|
||||||
|
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {
|
||||||
|
return /******/ (function(modules) { // webpackBootstrap
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var installedModules = {};
|
||||||
|
/******/
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) {
|
||||||
|
/******/
|
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ if(installedModules[moduleId]) {
|
||||||
|
/******/ return installedModules[moduleId].exports;
|
||||||
|
/******/ }
|
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = installedModules[moduleId] = {
|
||||||
|
/******/ i: moduleId,
|
||||||
|
/******/ l: false,
|
||||||
|
/******/ exports: {}
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||||
|
/******/
|
||||||
|
/******/ // Flag the module as loaded
|
||||||
|
/******/ module.l = true;
|
||||||
|
/******/
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = modules;
|
||||||
|
/******/
|
||||||
|
/******/ // expose the module cache
|
||||||
|
/******/ __webpack_require__.c = installedModules;
|
||||||
|
/******/
|
||||||
|
/******/ // define getter function for harmony exports
|
||||||
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||||
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||||
|
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||||
|
/******/ }
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = function(exports) {
|
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||||
|
/******/ }
|
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // create a fake namespace object
|
||||||
|
/******/ // mode & 1: value is a module id, require it
|
||||||
|
/******/ // mode & 2: merge all properties of value into the ns
|
||||||
|
/******/ // mode & 4: return value when already ns object
|
||||||
|
/******/ // mode & 8|1: behave like require
|
||||||
|
/******/ __webpack_require__.t = function(value, mode) {
|
||||||
|
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||||
|
/******/ if(mode & 8) return value;
|
||||||
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||||
|
/******/ var ns = Object.create(null);
|
||||||
|
/******/ __webpack_require__.r(ns);
|
||||||
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||||
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||||
|
/******/ return ns;
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||||
|
/******/ __webpack_require__.n = function(module) {
|
||||||
|
/******/ var getter = module && module.__esModule ?
|
||||||
|
/******/ function getDefault() { return module['default']; } :
|
||||||
|
/******/ function getModuleExports() { return module; };
|
||||||
|
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||||
|
/******/ return getter;
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Object.prototype.hasOwnProperty.call
|
||||||
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||||
|
/******/
|
||||||
|
/******/ // __webpack_public_path__
|
||||||
|
/******/ __webpack_require__.p = "";
|
||||||
|
/******/
|
||||||
|
/******/
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
||||||
|
/******/ })
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ ({
|
||||||
|
|
||||||
|
/***/ "./src/example/main.tsx":
|
||||||
|
/*!******************************!*\
|
||||||
|
!*** ./src/example/main.tsx ***!
|
||||||
|
\******************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||||
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
|
||||||
|
var react_dom_1 = __importDefault(__webpack_require__(/*! react-dom */ "react-dom"));
|
||||||
|
exports.default = (function () { return (react_1.default.createElement("div", null, "\u041D\u0430\u0448\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u04351")); });
|
||||||
|
exports.mount = function (component) {
|
||||||
|
react_dom_1.default.render(component, document.getElementById('app'));
|
||||||
|
};
|
||||||
|
exports.unmount = function () {
|
||||||
|
react_dom_1.default.unmountComponentAtNode(document.getElementById('app'));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ 1:
|
||||||
|
/*!************************************!*\
|
||||||
|
!*** multi ./src/example/main.tsx ***!
|
||||||
|
\************************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
|
module.exports = __webpack_require__(/*! ./src/example/main.tsx */"./src/example/main.tsx");
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "react":
|
||||||
|
/*!************************!*\
|
||||||
|
!*** external "react" ***!
|
||||||
|
\************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
|
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "react-dom":
|
||||||
|
/*!****************************!*\
|
||||||
|
!*** external "react-dom" ***!
|
||||||
|
\****************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
|
module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
/******/ });
|
||||||
|
});
|
||||||
|
//# sourceMappingURL=example.js.map
|
||||||
1
exampleApp/example.js.map
Normal file
1
exampleApp/example.js.map
Normal file
File diff suppressed because one or more lines are too long
161
exampleApp/example2.js
Normal file
161
exampleApp/example2.js
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
|
module.exports = factory(require("react"), require("react-dom"));
|
||||||
|
else if(typeof define === 'function' && define.amd)
|
||||||
|
define(["react", "react-dom"], factory);
|
||||||
|
else {
|
||||||
|
var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
|
||||||
|
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
|
||||||
|
}
|
||||||
|
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {
|
||||||
|
return /******/ (function(modules) { // webpackBootstrap
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var installedModules = {};
|
||||||
|
/******/
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) {
|
||||||
|
/******/
|
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ if(installedModules[moduleId]) {
|
||||||
|
/******/ return installedModules[moduleId].exports;
|
||||||
|
/******/ }
|
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = installedModules[moduleId] = {
|
||||||
|
/******/ i: moduleId,
|
||||||
|
/******/ l: false,
|
||||||
|
/******/ exports: {}
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||||
|
/******/
|
||||||
|
/******/ // Flag the module as loaded
|
||||||
|
/******/ module.l = true;
|
||||||
|
/******/
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = modules;
|
||||||
|
/******/
|
||||||
|
/******/ // expose the module cache
|
||||||
|
/******/ __webpack_require__.c = installedModules;
|
||||||
|
/******/
|
||||||
|
/******/ // define getter function for harmony exports
|
||||||
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||||
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||||
|
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||||
|
/******/ }
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = function(exports) {
|
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||||
|
/******/ }
|
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // create a fake namespace object
|
||||||
|
/******/ // mode & 1: value is a module id, require it
|
||||||
|
/******/ // mode & 2: merge all properties of value into the ns
|
||||||
|
/******/ // mode & 4: return value when already ns object
|
||||||
|
/******/ // mode & 8|1: behave like require
|
||||||
|
/******/ __webpack_require__.t = function(value, mode) {
|
||||||
|
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||||
|
/******/ if(mode & 8) return value;
|
||||||
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||||
|
/******/ var ns = Object.create(null);
|
||||||
|
/******/ __webpack_require__.r(ns);
|
||||||
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||||
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||||
|
/******/ return ns;
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||||
|
/******/ __webpack_require__.n = function(module) {
|
||||||
|
/******/ var getter = module && module.__esModule ?
|
||||||
|
/******/ function getDefault() { return module['default']; } :
|
||||||
|
/******/ function getModuleExports() { return module; };
|
||||||
|
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||||
|
/******/ return getter;
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Object.prototype.hasOwnProperty.call
|
||||||
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||||
|
/******/
|
||||||
|
/******/ // __webpack_public_path__
|
||||||
|
/******/ __webpack_require__.p = "";
|
||||||
|
/******/
|
||||||
|
/******/
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||||
|
/******/ })
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ ({
|
||||||
|
|
||||||
|
/***/ "./src/example2/main.tsx":
|
||||||
|
/*!*******************************!*\
|
||||||
|
!*** ./src/example2/main.tsx ***!
|
||||||
|
\*******************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||||
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
|
||||||
|
var react_dom_1 = __importDefault(__webpack_require__(/*! react-dom */ "react-dom"));
|
||||||
|
exports.default = (function () { return (react_1.default.createElement("div", null, "\u041D\u0430\u0448\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u04352")); });
|
||||||
|
exports.mount = function (component) {
|
||||||
|
react_dom_1.default.render(component, document.getElementById('app'));
|
||||||
|
};
|
||||||
|
exports.unmount = function () {
|
||||||
|
react_dom_1.default.unmountComponentAtNode(document.getElementById('app'));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ 2:
|
||||||
|
/*!*************************************!*\
|
||||||
|
!*** multi ./src/example2/main.tsx ***!
|
||||||
|
\*************************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
|
module.exports = __webpack_require__(/*! ./src/example2/main.tsx */"./src/example2/main.tsx");
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "react":
|
||||||
|
/*!************************!*\
|
||||||
|
!*** external "react" ***!
|
||||||
|
\************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
|
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "react-dom":
|
||||||
|
/*!****************************!*\
|
||||||
|
!*** external "react-dom" ***!
|
||||||
|
\****************************/
|
||||||
|
/*! no static exports found */
|
||||||
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
|
module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
/******/ });
|
||||||
|
});
|
||||||
|
//# sourceMappingURL=example2.js.map
|
||||||
1
exampleApp/example2.js.map
Normal file
1
exampleApp/example2.js.map
Normal file
File diff suppressed because one or more lines are too long
3
nodemon.json
Normal file
3
nodemon.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"watch": ["stubs/"]
|
||||||
|
}
|
||||||
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "@uds/bootstrap",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "nodemon ./stubs/server.js",
|
||||||
|
"build": "webpack --mode development",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "innoavvlasov@gmail.com",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "13.7.0",
|
||||||
|
"@types/react": "16.9.19",
|
||||||
|
"@types/react-dom": "16.9.5",
|
||||||
|
"@types/react-redux": "7.1.7",
|
||||||
|
"@types/systemjs": "6.1.0",
|
||||||
|
"awesome-typescript-loader": "5.2.1",
|
||||||
|
"clean-webpack-plugin": "3.0.0",
|
||||||
|
"copy-webpack-plugin": "5.1.1",
|
||||||
|
"es6-promise": "4.2.8",
|
||||||
|
"exports-loader": "0.7.0",
|
||||||
|
"express": "4.17.1",
|
||||||
|
"fbjs": "1.0.0",
|
||||||
|
"file-loader": "5.0.2",
|
||||||
|
"history": "4.10.1",
|
||||||
|
"imports-loader": "0.8.0",
|
||||||
|
"redux-devtools-extension": "2.13.8",
|
||||||
|
"rimraf": "3.0.1",
|
||||||
|
"systemjs": "6.2.2",
|
||||||
|
"typescript": "3.7.5",
|
||||||
|
"webpack": "4.41.5",
|
||||||
|
"webpack-cli": "3.3.10",
|
||||||
|
"webpack-dev-middleware": "3.7.2",
|
||||||
|
"webpack-hot-client": "4.1.2",
|
||||||
|
"whatwg-fetch": "3.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "16.12.0",
|
||||||
|
"react-dom": "16.12.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/.DS_Store
vendored
Normal file
BIN
src/.DS_Store
vendored
Normal file
Binary file not shown.
23
src/example/main.tsx
Normal file
23
src/example/main.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDom from 'react-dom';
|
||||||
|
|
||||||
|
export default () => (<div>Наше приложение1</div>);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const mount = (Сomponent) => {
|
||||||
|
// console.log('component', component);
|
||||||
|
ReactDom.render(
|
||||||
|
<Сomponent/>,
|
||||||
|
document.getElementById('app')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const unmount = () => {
|
||||||
|
ReactDom.unmountComponentAtNode(document.getElementById('app'))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
20
src/example2/main.tsx
Normal file
20
src/example2/main.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDom from 'react-dom';
|
||||||
|
|
||||||
|
export default () => (<div>Наше приложение2</div>);
|
||||||
|
|
||||||
|
export const mount = (Сomponent) => {
|
||||||
|
ReactDom.render(
|
||||||
|
<Сomponent/>,
|
||||||
|
document.getElementById('app')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const unmount = () => {
|
||||||
|
ReactDom.unmountComponentAtNode(document.getElementById('app'))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
50
src/main.tsx
Normal file
50
src/main.tsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDom from 'react-dom';
|
||||||
|
import { loadApp } from './utils';
|
||||||
|
|
||||||
|
class Bootstrap extends React.PureComponent <any, any> {
|
||||||
|
App: any;
|
||||||
|
currentBundle: string = '';
|
||||||
|
|
||||||
|
async downloader(bundleName: string) {
|
||||||
|
let _bundleName = bundleName;
|
||||||
|
this.currentBundle = bundleName;
|
||||||
|
this.App = await loadApp(_bundleName);
|
||||||
|
this.forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
mountApp = async(nameApp) => {
|
||||||
|
await this.downloader(nameApp);
|
||||||
|
this.App.mount(this.App.default)
|
||||||
|
}
|
||||||
|
|
||||||
|
unmountApp = () => {
|
||||||
|
this.App.unmount();
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={() => this.mountApp('example')}>
|
||||||
|
загрузить приложение 1
|
||||||
|
</button>
|
||||||
|
<button onClick={() => this.unmountApp()}>
|
||||||
|
выгрузить приложение 1
|
||||||
|
</button>
|
||||||
|
<button onClick={() => this.mountApp('example2')}>
|
||||||
|
загрузить приложение 2
|
||||||
|
</button>
|
||||||
|
<button onClick={() => this.unmountApp()}>
|
||||||
|
выгрузить приложение 2
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDom.render(
|
||||||
|
<Bootstrap/>,
|
||||||
|
document.getElementById('bootstrap')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
19
src/typings/import.d.ts
vendored
Normal file
19
src/typings/import.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
declare module '*.jpg' {
|
||||||
|
const value: any;
|
||||||
|
export = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
const value: any;
|
||||||
|
export = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const value: any;
|
||||||
|
export = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.mp4' {
|
||||||
|
const value: any;
|
||||||
|
export = value;
|
||||||
|
}
|
||||||
10
src/utils.ts
Normal file
10
src/utils.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export async function loadApp(bundleName) {
|
||||||
|
return await System.import(`./${bundleName}.js`)
|
||||||
|
.then(result => {
|
||||||
|
return result.default;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.info(`Загрузить ${bundleName} не удалось!`);
|
||||||
|
console.info(`error in ${bundleName}`, error);
|
||||||
|
});
|
||||||
|
}
|
||||||
9
stubs/importmap.json
Normal file
9
stubs/importmap.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"react": "/extlib/react/react.production.min.js",
|
||||||
|
"react-dom": "/extlib/react-dom/react-dom.production.min.js",
|
||||||
|
"redux": "/extlib/redux/redux.min.js",
|
||||||
|
"react-redux": "/extlib/react-redux/react-redux.min.js",
|
||||||
|
"styled-components": "extlib/styled-components/styled-components.min.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
26
stubs/index.html
Normal file
26
stubs/index.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Занятие по загрузчику</title>
|
||||||
|
<script type="systemjs-importmap" src="/importmap.json"></script>
|
||||||
|
<script src="extlib/systemjs/system.js"></script>
|
||||||
|
<script src="extlib/systemjs/extras/amd.js"></script>
|
||||||
|
<script src="extlib/systemjs/extras/named-register.js"></script>
|
||||||
|
<script src="extlib/systemjs/extras/named-exports.js"></script>
|
||||||
|
<script src="extlib/systemjs/extras/transform.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
System.import('./bootstrap.js');
|
||||||
|
</script>
|
||||||
|
<div id="bootstrap"></div>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
stubs/index.js
Normal file
10
stubs/index.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const express = require("express");
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
|
||||||
|
app.use(express.static(__dirname + "/dist"));
|
||||||
|
|
||||||
|
|
||||||
|
app.listen(8090, () => console.log("Listening on port 8090!"));
|
||||||
|
|
||||||
|
module.exports = app;
|
||||||
17
stubs/server.js
Normal file
17
stubs/server.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const hotClient = require('webpack-hot-client');
|
||||||
|
const middleware = require('webpack-dev-middleware');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const config = require('../webpack.config');
|
||||||
|
const app = require('../stubs');
|
||||||
|
const compiler = webpack(config);
|
||||||
|
const { publicPath } = config.output;
|
||||||
|
const options = { }; // webpack-hot-client options
|
||||||
|
|
||||||
|
// we recommend calling the client _before_ adding the dev middleware
|
||||||
|
const client = hotClient(compiler, options);
|
||||||
|
const { server } = client;
|
||||||
|
server.on('listening', () => {
|
||||||
|
app.use(middleware(compiler, { publicPath, historyApiFallback: true }));
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"es7"
|
||||||
|
],
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"*": [
|
||||||
|
"*",
|
||||||
|
"src/*",
|
||||||
|
"lib/*",
|
||||||
|
"dist/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"outDir": "./dist/",
|
||||||
|
"sourceMap": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"jsx": "react",
|
||||||
|
"typeRoots": ["node_modules/@types", "src/typings", "../../node_modules/@types"]
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
66
webpack.config.js
Normal file
66
webpack.config.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
const webpackCopy = require('copy-webpack-plugin');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||||
|
|
||||||
|
const outputDirectory = 'dist';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: 'development',
|
||||||
|
entry: {
|
||||||
|
bootstrap: ['./src/main.tsx'],
|
||||||
|
example: ['./src/example/main.tsx'],
|
||||||
|
example2: ['./src/example2/main.tsx']
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: '[name].js',
|
||||||
|
path: path.resolve(__dirname, outputDirectory),
|
||||||
|
libraryTarget: 'umd',
|
||||||
|
globalObject: `(typeof self !== 'undefined' ? self : this)`
|
||||||
|
},
|
||||||
|
node: {
|
||||||
|
fs: 'empty'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new CleanWebpackPlugin(),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'typeof window': JSON.stringify('object')
|
||||||
|
}),
|
||||||
|
new webpackCopy([
|
||||||
|
{ from: 'stubs/index.html' },
|
||||||
|
{ from: 'stubs/importmap.json' },
|
||||||
|
{ from: './node_modules/systemjs/dist', to: 'extlib/systemjs' },
|
||||||
|
{ from: './node_modules/react/umd', to: 'extlib/react' },
|
||||||
|
{ from: './node_modules/react-dom/umd', to: 'extlib/react-dom' }
|
||||||
|
// { from: 'exampleApp' }
|
||||||
|
])
|
||||||
|
],
|
||||||
|
devtool: '#source-map',
|
||||||
|
//devtool: 'none',
|
||||||
|
resolve: {
|
||||||
|
modules: ['node_modules', 'src'],
|
||||||
|
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css']
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{ parser: { system: false } },
|
||||||
|
{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
loader: 'awesome-typescript-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(jpe?g|gif|png|svg|woff|ttf|eot|wav|mp3)$/,
|
||||||
|
loader: 'file-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
externals: {
|
||||||
|
'react': 'react',
|
||||||
|
'react-dom': 'react-dom',
|
||||||
|
'redux': 'redux',
|
||||||
|
'react-redux': 'react-redux',
|
||||||
|
'styled-components': 'styled-components'
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user