Модули

Какие есть модули, краткий обзор

Теги: модули, CommonJS, AMD, ES6 Modules, WebPack, динамическая подгрузка

Transcript

1. Модули Евгений Жлобо
2. Проблема?
3. Далее много букв и кода!
4. • Оборачиваем в самовызываемые анонимные функции для инкапсуляции • Объединяем в один зачем вы читаете этот текст файл для оптимизации • Следим за порядком все равно проговариваю вслух зависимостей
6. 1. CommonJS 2. AMD 3. ES6 Modules
7. 1/3 CommonJS
8. const $ = require('jquery'); exports.myComponent = function() { // Code of my component };
9. const $ = require('jquery'); exports.myComponent = function() { // Code of my component }; Любите браузеры?
10. CommonJS не любит ;(
11. 2/3 AMD
12. 2/3 AMD Asynchronous Module Definition
13. define(‘module’, ['jquery'], function($) { return function () { // hello } })
14. define(‘module’, ['jquery'], function($) { return function () { // hello } })
15. define(‘module’, ['jquery'], function($) { return function () { // hello } })
16. define(‘module’, ['jquery'], function($) { return function () { // hello } })
17. define(‘module’, ['jquery'], function($) { return function () { // hello } })
18. 2/3 AMD
19. 3/3 ES6 Modules
20. module getName { export var value = ‘Eugene’ } module greeting { import value from getName export `Hello ${value}` }
21. module getName { export var value = ‘Eugene’ } module greeting { import value from getName export `Hello ${value}` }
22. module getName { export var value = ‘Eugene’ } module greeting { import value from getName export `Hello ${value}` }
23. // utils.js export const inc = number => number + 1 // module.js import { inc } from ‘./utils’ export default inc(1) // main.js import two from ‘./module’ two === 2 // true
24. // utils.js export const inc = number => number + 1 // module.js import { inc } from ‘./utils’ export default inc(1) // main.js import two from ‘./module’ two === 2 // true
25. // utils.js export const inc = number => number + 1 // module.js import { inc } from ‘./utils’ export default inc(1) // main.js import two from ‘./module’ two === 2 // true
26. // utils.js export const inc = number => number + 1 // module.js import { inc } from ‘./utils’ export default inc(1) // main.js import two from ‘./module’ two === 2 // true
27. 3/3 ES6 Modules
28. Но у нас вебпак
29. Поддерживает CommonJS и AMD https://webpack.github.io/docs/code-splitting.html
30. // jquery.js module.exports = jQuery // utils.js const inc = number => number + 1 module.exports = { inc }
31. // page.js const page = (require) => { const $ = require(‘./jquery’) const utils = require(‘./utils’) utils.inc(1) // 2 } require.ensure([‘./jquery’, ‘./utils’], page) CommonJS
32. AMD // page.js const page = ($, utils) => { utils.inc(1) // 2 } require([‘./jquery’, ‘./utils’], page)
34. Webpack 1.x.x (coming in 2.0.0!) does not natively support or understand ES6 modules. However, you can get around that by using a transpiler, like Babel, to turn the ES6 import syntax into CommonJs or AMD modules. This approach is effective but has one important caveat for dynamic loading. The module syntax addition (import x from 'foo') is intentionally designed to be statically analyzable, which means that you cannot do dynamic imports. // INVALID!!!!!!!!! ['lodash', 'backbone'].forEach(name => import name ) Luckily, there is a JavaScript API “loader” specification being written to handle the dynamic use case: System.load (or System.import ). This API will be the native equivalent to the above require variations. However, most transpilers do not support converting System.load calls to require.ensure so you have to do that directly if you want to make use of dynamic code splitting. ES6 Modules
35. ES6 Modules TL;DR: Webpack doesn’t support