up

iliakan · iliakan · commit 963f237a85d0 · 2015-08-01T13:07:38.000+03:00
diff --git a/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/index.html b/1-js/10-es-modern/11-promise/2-promise-sequence/solution.view/index.html
@@ -29,6 +29,5 @@
     });
 
   </script>
-      
 </body>
 </html>
diff --git a/1-js/10-es-modern/13-modules/article.md b/1-js/10-es-modern/13-modules/article.md
@@ -0,0 +1,67 @@
+
+# Модули
+
+Концепция модулей как способа организации JavaScript-кода существовала давно. 
+
+Когда приложение сложное и кода много -- мы пытаемся разбить его на файлы. В каждом файле описываем какую-то часть, а в дальнейшем -- собираем эти части воедино.
+
+Модули в стандарте EcmaScript предоставляют удобные средства для этого.
+
+Такие средства предлагались сообществом и ранее, например:
+
+<ul>
+<li>[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)</li>
+<li>[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition)</li>
+<li>[UMD](https://github.com/umdjs/umd)</li>
+</ul>
+
+Все они требуют различных библиотек или систем сборки для использования.
+
+Новый стандарт отличается от них прежде всего тем, что это -- стандарт. А значит, со временем, будет поддерживаться браузерами без дополнительных утилит.
+
+Сейчас браузерной поддержки почти нет. Поэтому ES-модули используются вместе с системами сборки, такими как [webpack](http://webpack.github.io/), [brunch](http://brunch.io/) и другими, при подключённом [Babel.JS](https://babeljs.io). 
+
+
+## Что такое модуль?
+
+Модулем считается файл с кодом.
+
+В этом файле ключевым словом `export` помечаются переменные и функции, которые могут быть использованы снаружи.
+
+Другие модули могут подключать их через вызов `import`.
+
+Нагляднее всего это проиллюстрировать примером.
+
+Модуль `one.js` экспортирует переменную `one`:
+
+```js
+export let one = 1;
+```
+
+Модуль `two.js`:
+```
+let two = 2;
+
+export {two}
+```
+
+
+[codetabs src="nums"]
+
+
+
+То есть, браузер, в котором есть поддержка модулей, или система сборки ("сегодняшний" вариант) 
+
+Модуль -- это файл со специальными командами:
+
+<ul>
+<li>Экспорты -- </li>
+
+
+
+
+
+
+Общее между ними
+
+Модуль  -- способ организации кода по файлам. Каждый файл 
diff --git a/1-js/10-es-modern/13-modules/nums.view/bundle.js b/1-js/10-es-modern/13-modules/nums.view/bundle.js
@@ -0,0 +1,70 @@
+/******/ (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] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = 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;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _nums = __webpack_require__(1);
+
+	console.log(_nums.one + _nums.two);
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	var one = 1;
+
+	exports.one = one;
+	var two = 2;
+
+	exports.two = two;
+
+/***/ }
+/******/ ]);
diff --git a/1-js/10-es-modern/13-modules/nums.view/main.js b/1-js/10-es-modern/13-modules/nums.view/main.js
@@ -0,0 +1,3 @@
+import {one, two} from './nums';
+
+console.log(one + two);
diff --git a/1-js/10-es-modern/13-modules/nums.view/nums.js b/1-js/10-es-modern/13-modules/nums.view/nums.js
@@ -0,0 +1,5 @@
+export let one = 1;
+
+let two = 2;
+
+export {two};
diff --git a/1-js/10-es-modern/13-modules/nums.view/webpack.config.js b/1-js/10-es-modern/13-modules/nums.view/webpack.config.js
@@ -0,0 +1,18 @@
+// Required:
+// npm i -g webpack
+// npm i babel-loader
+
+module.exports = {
+  entry: './main',
+
+  output: {
+    filename: 'bundle.js'
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, loader: "babel" }
+    ]
+  }
+};
+

-Original file line number
+Diff line change
     });
   </script>
+-
 </body>
 </html>
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import {one, two} from './nums';`
	`2`	`+`
	`3`	`+console.log(one + two);`