Menguak Misteri Module Bundler
0 likes198 views
Pernah bingung gimana caranya sebuah framework menghasilkan sebuah kode output yang berbeda dengan kode yang kamu tulis? Penasaran sebetulnya apa yang terjadi dibalik layar dan gimana caranya kamu bisa belajar dari hal itu untuk memperbaiki kode yang kamu hasilkan?
![#!/usr/bin/env bash
set -e
deps=(
"gh/lil-js/uuid@0.1.1/uuid.min.js"
"gh/florian/xStore@2.0.4/src/xStore.min.js"
"npm/confetti-js@0.0.18/dist/index.min.js"
"npm/dayjs@1.8.21/dayjs.min.js"
"npm/dayjs@1.8.21/plugin/relativeTime.js"
)
for i in "${deps[@]}"
do
curl "https://cdn.jsdelivr.net/${i}" -L
echo ";"
done $ ./buildVendors.sh > vendors.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-16-320.jpg)
![Asynchronous Module Definition
// lib.js
define('yayQuery', ['yayQueryUI'], function(yayQueryUI) {
// returns the exported value
return function() {
// ...
};
});
// app.js
// define path
requirejs.config({
baseUrl: 'js/lib/',
paths: {
yayquery: 'yayquery-1.1.1'
}
});
define(['yayquery'], function($) {
// this is executed only when yayquery and it's deps are loaded
});](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-47-320.jpg)
![Universal Module Definition
(function(root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'));
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function(dep) {
return (root.returnExportsGlobal = factory(dep));
});
} else {
// Globals
root.myModule = factory(root.dep);
}
})(this, function(dep) {
// Your actual module
return {};
});](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-49-320.jpg)
![module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-71-320.jpg)
![module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Entry point](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-72-320.jpg)
![module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Output](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-73-320.jpg)
![module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Loaders](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-74-320.jpg)
![module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-75-320.jpg)
![import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-84-320.jpg)
![import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js
Entry Point](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-85-320.jpg)
![import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
Output
rollup.config.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-86-320.jpg)
![import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js
Loaders & Plugins](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-87-320.jpg)
![import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
export default {
input: 'js/app.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife',
globals: {
'dayjs/plugin/relativeTime': 'relativeTime',
dayjs: 'dayjs',
xStore: 'xStore',
lil: 'lil-uuid',
ConfettiGenerator: 'confetti-js'
}
},
plugins: [
resolve(),
commonjs(),
babel({ exclude: 'node_modules/*' }),
uglify()
]
}; rollup.config.js](https://image.slidesharecdn.com/slidemisterimodulebundler-200428154412/85/Menguak-Misteri-Module-Bundler-93-320.jpg)
Menguak Misteri Module Bundler
- 1. Menguak Misteri Module Bundler
- 5. Agenda Demo aplikasi Menulis JS yang lebih modular Menggunakan Module Bundler
- 13. 6 requests hanya untuk JS 😱
- 14. Vendors
- 16. #!/usr/bin/env bash set -e deps=( "gh/lil-js/uuid@0.1.1/uuid.min.js" "gh/florian/xStore@2.0.4/src/xStore.min.js" "npm/confetti-js@0.0.18/dist/index.min.js" "npm/dayjs@1.8.21/dayjs.min.js" "npm/dayjs@1.8.21/plugin/relativeTime.js" ) for i in "${deps[@]}" do curl "https://cdn.jsdelivr.net/${i}" -L echo ";" done $ ./buildVendors.sh > vendors.js
- 19. di 2008 Solusi yang bagus
- 20. Solusi yang lebih baik • Proses update dependencies yang lebih mudah • Tidak khawatir terhadap dependencies of dependencies • Urutan dari import tidak menjadi masalah
- 22. function add(a, b) { return a + b; } function sub(a, b) { return a - b; } function mul(a, b) { return a * b; } function div(a, b) { return a / b; } basic_calc.js
- 23. advance_calc.js function squared(a) { return mul(a, a); }
- 24. calc.html <script src="js/basic_calc.js"></script> <script src=“js/advance_calc.js"></script> <script> console.log(squared(4)); console.log(add(3, 4)); console.log(mul(3, 5)); </script> Semuanya jadi global 😢
- 26. let BasicCalc = function() { return { add: function(a, b) { return a + b; }, sub: function(a, b) { return a - b; }, mul: function(a, b) { return a * b; }, div: function(a, b) { return a / b; } }; }; basic_calc.js
- 27. advance_calc.js let AdvanceCalc = function() { return { squared: function squared(a) { return BasicCalc().mul(a, a); } }; };
- 28. calc.html Ok, tapi jadi aneh 🤔 <script src="js/basic_calc.js"></script> <script src=“js/advance_calc.js"></script> <script> console.log(AdvanceCalc().squared(4)); console.log(BasicCalc().add(3, 4)); console.log(BasicCalc().mul(3, 5)); </script>
- 29. iifeImmediately Invoked Function Expression
- 30. let add = function (a, b) { return a + b; } console.log(add(1, 2));
- 31. let add = (function (a, b) { return a + b; })(1, 2); console.log(add);
- 32. let BasicCalc = function() { return { add: function(a, b) { return a + b; }, sub: function(a, b) { return a - b; }, mul: function(a, b) { return a * b; }, div: function(a, b) { return a / b; } }; }; basic_calc.js
- 33. basic_calc.js let BasicCalc = (function() { return { add: function(a, b) { return a + b; }, sub: function(a, b) { return a - b; }, mul: function(a, b) { return a * b; }, div: function(a, b) { return a / b; } }; })();
- 34. advance_calc.js let AdvanceCalc = function() { return { squared: function squared(a) { return BasicCalc().mul(a, a); } }; };
- 35. advance_calc.js let AdvanceCalc = (function() { return { squared: function squared(a) { return BasicCalc.mul(a, a); } }; })();
- 36. calc.html <script src="js/basic_calc.js"></script> <script src=“js/advance_calc.js"></script> <script> console.log(AdvanceCalc().squared(4)); console.log(BasicCalc().add(3, 4)); console.log(BasicCalc().mul(3, 5)); </script>
- 37. calc.html <script src="js/basic_calc.js"></script> <script src="js/advance_calc.js"></script> <script> console.log(AdvanceCalc.squared(4)); console.log(BasicCalc.add(3, 4)); console.log(BasicCalc.mul(3, 5)); </script>
- 38. Suatu saat kita butuh sistem modulasi yang dapat digunakan di aplikasi atau proyek berbeda
- 39. Module System • Sintaksis yang lebih sederhana untuk import/export • Bisa dengan mudah mendefinisikan modul di file terpisah • Bisa saling import Must have!
- 40. Module System • Menghindari name collision • Import modul secara async • Bisa di browser atau di server via node.js Nice to have!
- 41. JS Module System
- 42. Module System • Globals • CommonJS • Asynchronous Module Definition (AMD) • Universal Module Definition (UMD) • ES2015 Module (ESM) • Lainnya…
- 43. globals var $, jQuery; $ = jQuery = (() => { return { /* ... */ } })(); // usage $('.btn-success').remove();
- 44. Globals • Naming collisions 👎 • Urutan import harus diperhatikan 👎 • Tidak bisa import sebagian modul yang dibutuhkan 👎 • Hanya bisa menggunakan pustaka dari CDN 👎
- 45. CommonJS // calc.js const calc = { /* ... */ } module.exports = calc; // app.js const calc = require('./calc.js'); calc.add(1, 3); // other_app.js const { add } = require('./calc.js'); calc.add(1, 3);
- 46. CommonJS • Tidak terjadi naming collision 👍 • Pustaka banyak tersedia via npm 👍 • Dapat digunakan di server via Node.js 👍 • Belum bisa untuk di browser 👎 • Hanya bisa import secara synchronous 👎
- 47. Asynchronous Module Definition // lib.js define('yayQuery', ['yayQueryUI'], function(yayQueryUI) { // returns the exported value return function() { // ... }; }); // app.js // define path requirejs.config({ baseUrl: 'js/lib/', paths: { yayquery: 'yayquery-1.1.1' } }); define(['yayquery'], function($) { // this is executed only when yayquery and it's deps are loaded });
- 48. Require.JS/AMD • Async module 👍 • Bisa berjalan di browser dan server 👍 • Kode boilerplate cukup banyak 👎
- 49. Universal Module Definition (function(root, factory) { if (typeof exports === 'object') { // CommonJS module.exports = factory(require('dep')); } else if (typeof define === 'function' && define.amd) { // AMD define(['dep'], function(dep) { return (root.returnExportsGlobal = factory(dep)); }); } else { // Globals root.myModule = factory(root.dep); } })(this, function(dep) { // Your actual module return {}; });
- 50. Universal Module Definition • Semua jenis modul bisa digunakan 👍 • Kode pembungkus cukup kompleks, sepertinya sulit ditulis manual 👎
- 51. ES2015 Modules // calc.js const add = (a, b) => a + b; const sub = (a, b) => a - b; const mul = (a, b) => a * b; const div = (a, b) => a / b; export { add, sub, mul, div }; // app.js import { add } from './calc.js'; console.log(add(1, 3));
- 52. ES2015 Modules <html> <body> <!-- ... --> <script type="module"> import { add } from ‘./basic_calc.js'; console.log(add(1, 3)); </script> </body> </html>
- 53. ES2015 Modules • Secara sintaksis mirip dengan CommonJS • (Hampir) menjadi format baku 👍 • (Hampir) dapat berjalan di browser dan server 👍
- 54. Mari Kita Coba
- 55. const BasicCalc = require('./basic_calc.js'); function squared(a) { return BasicCalc.mul(a, a); } CommonJS
- 56. ESM import { mul } from './basic_calc.js'; function squared(a) { return mul(a, a); }
- 57. Module Bundler
- 58. Alat bantu untuk melakukan bundle JavaScript modules menjadi satu file dan dan dapat dijalankan di browser.
- 59. Fitur Penting Lainnya • Sistem modulasi belum sepenuhnya didukung oleh browser • Menangani dependencies dan hubungan dengan dependencies lain • Dapat pula digunakan untuk gambar, CSS dan aset lainnya.
- 60. Fitur Tambahan • Menjalankan development server • Tree shaking • Membuat source map otomatis • Code splitting
- 61. Konsep Umum Bundler • Entry point: file utama yang akan dicek oleh bundler • Output: File akhir yang akan digunakan • Loaders: Algoritma parsing yang ingin digunakan seperti babel, typescript, dll. • Plugins: Fitur tambahan yang dibutuhkan.
- 63. $ npm install webpack webpack-cli
- 64. basic_calc.js function add(a, b) { return a + b; } function mul(a, b) { return a * b; } export { add, mul };
- 65. advance_calc.js import { mul } from './basic_calc.js'; function squared(a) { return mul(a, a); } export { squared };
- 66. import { add, mul } from './basic_calc.js'; import { squared } from './advance_calc.js'; console.log(add(1, 3)); console.log(mul(2, 4)); console.log(squared(4)); main.js
- 67. $ npx webpack js/main.js
- 68. const modules = { 'basic_calc.js': function(exports, require) { exports.add = function(a, b) { return a + b; }; exports.mul = function(a, b) { return a * b; }; }, 'advance_calc.js': function(exports, require) { const mul = require('basic_calc.js').mul; exports.squared = function(a) { return mul(a, a); }; }, 'main.js': function(exports, require) { const add = require('basic_calc.js').add; const mul = require('basic_calc.js').mul; const squared = require('advance_calc.js').squared; console.log(add(1, 3)); console.log(mul(2, 4)); console.log(squared(4)); } }; webpackStart({ modules, entry: 'app.js' }); Ilustrasi Webpack
- 69. 🍀 Leaderboard
- 70. $ npm install confetti-js dayjs lil-uuid xStore
- 71. module.exports = { entry: ['./js/app.js'], output: { path: __dirname + '/dist', filename: 'bundle.webpack.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } // plugins: [] }; webpack.config.js
- 72. module.exports = { entry: ['./js/app.js'], output: { path: __dirname + '/dist', filename: 'bundle.webpack.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } // plugins: [] }; webpack.config.js Entry point
- 73. module.exports = { entry: ['./js/app.js'], output: { path: __dirname + '/dist', filename: 'bundle.webpack.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } // plugins: [] }; webpack.config.js Output
- 74. module.exports = { entry: ['./js/app.js'], output: { path: __dirname + '/dist', filename: 'bundle.webpack.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } // plugins: [] }; webpack.config.js Loaders
- 75. module.exports = { entry: ['./js/app.js'], output: { path: __dirname + '/dist', filename: 'bundle.webpack.js' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } // plugins: [] }; webpack.config.js
- 76. $ npx webpack --config webpack.config.js
- 78. Gaya Webpack • Menggunakan module map • Menggunakan fungsi untuk membungkus setiap modul
- 79. rollup.js
- 80. $ npm install rollup rollup-plugin-babel
- 81. basic_calc.js function add(a, b) { return a + b; } function mul(a, b) { return a * b; } export { add, mul };
- 82. advance_calc.js import { mul } from './basic_calc.js'; function squared(a) { return mul(a, a); } export { squared };
- 83. import { add, mul } from './basic_calc.js'; import { squared } from './advance_calc.js'; console.log(add(1, 3)); console.log(mul(2, 4)); console.log(squared(4)); main.js
- 84. import babel from 'rollup-plugin-babel'; export default { input: 'js/main.js', output: { file: 'dist/bundle.rollup.js', format: 'iife' }, plugins: [ babel() ] }; rollup.config.js
- 85. import babel from 'rollup-plugin-babel'; export default { input: 'js/main.js', output: { file: 'dist/bundle.rollup.js', format: 'iife' }, plugins: [ babel() ] }; rollup.config.js Entry Point
- 86. import babel from 'rollup-plugin-babel'; export default { input: 'js/main.js', output: { file: 'dist/bundle.rollup.js', format: 'iife' }, plugins: [ babel() ] }; Output rollup.config.js
- 87. import babel from 'rollup-plugin-babel'; export default { input: 'js/main.js', output: { file: 'dist/bundle.rollup.js', format: 'iife' }, plugins: [ babel() ] }; rollup.config.js Loaders & Plugins
- 88. $ npx rollup -c
- 89. function basic_calc$add(a, b) { return a + b; } function basic_calc$mul(a, b) { return a * b; } function advance_calc$squared(a) { return basic_calc$mul(a, a); } console.log(basic_calc$add(1, 3)); console.log(basic_calc$mul(2, 4)); console.log(advance_calc$squared(4)); Ilustrasi Rollup
- 90. 🍀 Leaderboard
- 91. $ npm install confetti-js dayjs lil-uuid xStore
- 92. $ npm install rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-uglify
- 93. import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import babel from 'rollup-plugin-babel'; import { uglify } from 'rollup-plugin-uglify'; export default { input: 'js/app.js', output: { file: 'dist/bundle.rollup.js', format: 'iife', globals: { 'dayjs/plugin/relativeTime': 'relativeTime', dayjs: 'dayjs', xStore: 'xStore', lil: 'lil-uuid', ConfettiGenerator: 'confetti-js' } }, plugins: [ resolve(), commonjs(), babel({ exclude: 'node_modules/*' }), uglify() ] }; rollup.config.js
- 94. $ npx rollup -c
- 96. Gaya Rollup • Menghasilkan bundle yang lebih rata dan sederhana • Tidak menggunakan fungsi pembungkus
- 99. Kesimpulan
- 100. Kesimpulan • Module bundler adalah alat bantu untuk membungkus JavaScript agar dimengerti browser • Bundler dibutuhkan agar aplikasi lebih modular dan dapat menggunakan sintaksis JavaScript modern • Menggunakan concatenation dan minification cukup untuk aplikasi sederhana