Si no queremos usar la import ES6 ni bibliotecas de terceros (como require.js, etc.) ni ningún generador de paquetes, ¿cuál es la forma clásica de empaquetar una biblioteca para que el usuario pueda usarla con lo que parece ser un biblioteca-espacio de nombres?
index.html (desde la perspectiva del usuario de la biblioteca)
<canvas id="mycanvas"></canvas> <script src="canvas.js"></script> <script> canvas.setup({"config1": true, "config2": false}); var mycanvas1 = canvas.get("#mycanvas"); </script>A veces veo un código similar a
// canvas.js (function (window, something, else) { window.canvas.setup = function() { ... } // how to export functions setup and get? })(window, ..., ...); ¿Cómo hacer este IIFE correctamente para crear este ejemplo de biblioteca canvas.js ?
Nota: con la import de ES6, podemos empaquetar de esta manera una biblioteca llamada canvas.js :
const canvas = { setup: config => { console.log("config"); }, get: id => { console.log("get"); } }; export default canvas; y utilícelo como index.html de esta manera:
<canvas id="mycanvas"></canvas> <script type="module"> import canvas from "./canvas.js"; canvas.setup({"config1": true, "config2": false}); var mycanvas1 = canvas.get("#mycanvas"); </script>pero en esta pregunta aquí tengo curiosidad acerca de la solución anterior a ES6.
Una solución parece ser:
// canvas.js canvas = (function(window) { // assign the result of the IIFE to a global var to make // it available for the user of the lib var internal_variable; // not accessible to the user of the lib var state; // this variable will be available to the user of the lib function setup(arg) { console.log("setup"); } function get(arg) { console.log("get"); // + other lines using window object } return {setup: setup, get: get, state: state}; // important: here we choose what we // export as an object })(window);Ahora el usuario puede usar la biblioteca de esta manera:
<canvas id="mycanvas"></canvas> <script src="canvas.js"></script> // object canvas is now available <script> canvas.setup({"config1": true, "config2": false}); var mycanvas1 = canvas.get("#mycanvas"); console.log(canvas.state); </script>