2d:null 2e:["$","title",null,{"children":"Introduction à \\`require\\` | Malik Koné | Observable"}] 33:[] 31:{"id":"bf18e920ae05738f","slug":"introduction-a-require","title":"Introduction à \\`require\\`","thumbnail":"0a57f31a67b2b5fc5c7b787d7ee938bad01b8379a6e6d6e3ae3d60edc0d967b0","access_level":"public","create_time":"$D2018-05-28T14:47:53.758Z","update_time":"$D2019-09-24T07:59:36.706Z","view_time":null,"first_public_time":"$D2019-01-25T11:27:58.227Z","has_unpublished_edits":null,"fork":{"id":"648c182c7b86b597","slug":"require","title":"Introduction to require","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"94dddef164ca86e1","slug":"translations","title":"Translations","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Introduction à \\`require\\`","cells":[{"id":0,"value":"md`# Introduction à \\`require\\`\n\n\\`require\\` est une fonction javascript qui permet d'inclure des modules (bibliothèques externes) et d'en appeler les fonctions depuis son propre code. Il y ainsi des miliers projets *open source* où puiser des ressources pour faire ce que vous voulez : des mathématiques à de la musique.\n\n\\`require\\` est le pendant à javascript de ce qu'[\\`import\\`](https://beta.observablehq.com/@mbostock/introduction-to-imports) est aux cahiers Observables.\n\nA titre d'exemple:\nAppelons [simple-statistics](\\'simple-statistics\\') un module qui définie des fonctions statistiques.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"simpleStatistics = require('simple-statistics')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Sa fonction \\`standardDeviation\\` (écart type) est maintenant accessible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"simpleStatistics.standardDeviation([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`Importons de même \\`request\\` et \\`crypto\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"request = require('https://bundle.run/request@2.87.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"cryp = require('crypto')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`---\n\n## Renseigner \\`require\\`\n\nLa fonction \\`require\\` peut avoir les paramètres suivants:\n\n**Un nom de module**\n\nC'est le cas le plus commun. Par exemple pour charger la bibliothèque des fonctions temporelles, [moment](https://momentjs.com/), écrire comme ci-dessous:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"moment = require('moment')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`On peut alors utiliser les fonctions importées de la bibliothèque.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"moment('January 2, 2018').subtract(1, 'year').year()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`Le nom de la bibliothèque peut inclure le numéro de *version* spécifié de façon [sémantique](https://semver.npmjs.com/)??. \n\nPar exemple, ci-dessous, nous chargeons les versions 2.x.x de la bibliothèque moment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"moment2 = require('moment@2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`**Un nom de bibliothèque et un chemin**\n\nParfois vous n'avez besoin que d'un seul fichier de la bibliothèque. Cela est peu fréquent mais le savoir peut s'avérer utile lorsque la bibliothèque qui vous intéresse à des _addons_ ou ne s'expose pas correctement par défaut.\n\nPar exemple, voici comment nous pouvons inclure la bibliothèque [Chart.js](http://www.chartjs.org/) qui comprend un fichier AMD utilisable par \\`require\\` sans pour autant l'exposer par défaut. Au lieu de se baser sur l'auto-detection nous spécifions nomément le fichier:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"Graphique = require('chart.js/dist/Chart.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`**Une URL**\n\nVous pouvez aussi spécifier une URL complète afin de pointer \\`require\\` vers un server quelconque et pas uniquement unpkg. Par example, pour charger la dernière version de [ganja.js](https://github.com/enkimute/ganja.js) à partir de GitHub (via [RawGit](https://rawgit.com/)).^*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"ganja = require('https://cdn.rawgit.com/enkimute/ganja.js/master/ganja.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`---\n\n## La valeur de retour de require\n\n\\`require\\` retourne une promesse avec le contenu de la bibliothèque, ou si elle ne peut être chargé une promesse rejetée.\n\nLa plus part du temps vous utiliserez \\`require\\` dans sa propre cellule, comme dans les exemples précédent. Vous n'aurez pas besoin de vous inquiéter l'asynchronie du retour. Mais si vous utilisez \\`require\\` dans votre code, il vous faudra \\`await\\` attendre la valeur de que la promesse renvera.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n // using await to resolve the Promise returned by require\n let _ = await require('lodash');\n // using the module\n return _.filter([1, 2, 0]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`Dans certains cas \\`require\\` ne trouvera pas la bibliothèque ou sera incapable de la chargé et renverra une promesse rejetée`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"notValid = require('not-a-real-npm-module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`Si vous avez des problèmes pour charger une bibliothèque essayer d'utiliser [module require debugger](https://beta.observablehq.com/@tmcw/module-require-debugger), ou demandez dans [asking in the forum](https://talk.observablehq.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`---\n\n## require’s behavior\n\nBy default, the \\`require\\` function uses modules published on [NPM](https://www.npmjs.com/), a service that hosts over 600,000 different modules^* created by thousands of individual developers. Because notebooks run in a web environment, we use another service, [unpkg.com](https://unpkg.com/), that takes NPM's modules and makes them accessible to browsers.\n\nFor example, if we call require with the argument \\`d3\\`, it expands that argument into \\`http://unpkg.com/d3\\`, which then redirects to the source code of the D3 visualization library:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`So if you see a \\`require\\` statement in a notebook, searching for its name on [npmjs.com](http://npmjs.com/) is likely to pull up its details - here’s [the d3 package on NPM](https://www.npmjs.com/package/d3), which links to its GitHub information and other documentation.\n\n### Requirements for require\n\nThe require function works with modules that include AMD distributions and that point to them in the \\`unpkg\\` or \\`main\\` fields of their \\`package.json\\` files.^* Unfortunately, not all modules are compatible: some rely on the built-in functions in Node.js that have no equivalent in the browser, and others don’t include an AMD file that require can use.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`---\n\n## import(): a way to require ES6 modules\n\nIn addition to \\`require\\`, which uses the widely-supported [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) standard, we also support \\`import()\\`, a new way of requiring modules that aims to eventually obviate the need for custom functions like \\`require\\`.\n\n\\`import()\\` is a native browser feature that’s just now gaining adoption — it only works in the newest versions of Chrome, Safari, Firefox, and Edge. It also requires modules to be published in the [ES6 module specification](http://exploringjs.com/es6/ch_modules.html), which is still gaining adoption.\n\nLike \\`require\\`, we’ve added a shortcut so that you can refer to modules by name with \\`import()\\` and it’ll load them from unpkg.com, if they’re available - or you can specify a full URL and it’ll pull from any other source.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"scale = import('d3-scale')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`---\n\n## Footnotes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"urlNotes = md`- If you’re using require with a URL, the URL & server it points to need to fit a few requirements:\n - \\`https\\` URLs only (not \\`http\\`)\n - The file needs a correct Content-Type header to be used as JavaScript - for example, \\`raw.githubusercontent.com\\` serves JavaScript files as \\`text/plain\\`, which your browser cannot execute as JavaScript - which is why we often use RawGit instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"amdNotes = md`- require works with a _subset_ of AMD modules that includes the vast majority of such modules: the strict specification is [documented in the documentation for d3-require](https://github.com/d3/d3-require#d3-require), the module that powers \\`require()\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`## More resources\n\n- 🚢 [Introduction to imports](https://beta.observablehq.com/@mbostock/introduction-to-imports) (like require, but for notebook-to-notebook sharing)\n- 🤔 [Require troubleshooting documentation](https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting)\n- 🐛 [Module debugger tool](https://beta.observablehq.com/@tmcw/module-require-debugger)\n- 📦 [d3-require, the module that powers \\`require\\`](https://github.com/d3/d3-require)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"