Début avec Browserify

Les implémentations JavaScript sont devenues de plus en plus complexes à mesure que la belle bête que nous appelons le Web évolue chaque année. Beaucoup d'entre nous travaillent désormais avec des modules JavaScript - des composants fonctionnant indépendamment qui se réunissent pour fonctionner comme un ensemble cohésif, mais peuvent avoir avec plaisir un composant remplacé sans provoquer Armageddon. Beaucoup d'entre nous ont utilisé le motif du module AMD et les obligations pour accomplir cela soigneusement.

L'année dernière, Browserify est entré en scène et a provoqué beaucoup d'excitation. Au fur et à mesure que la poussière commence à se régler, je voulais rédiger un aperçu de ce qu'est la navigation, comment cela fonctionne et quelques options pour l'ajouter à votre flux de travail.

Les plats clés

• Browserify permet d'utiliser des modules de style Node.js directement dans le navigateur en regroupant les dépendances en un seul fichier javascript.
• Pour commencer à utiliser Browserify, vous avez besoin de Node.js, NPM (installé avec Node.js par défaut) et Browserify, qui peut être installé globalement à l'aide de `NPM Install -g Browserify`.
• Browserify simplifie, y compris les bibliothèques externes dans votre projet en utilisant des instructions `` require () ', similaires à Node.js, et peut également générer des cartes source pour un débogage plus facile.
• Vous pouvez automatiser le processus de navigation à l'aide de scripts NPM ou de coureurs de tâches comme Gulp et Grunt, améliorant l'efficacité du flux de travail et la réduction des efforts de regroupement manuel.
• Gestion des dépendances dans les projets de navigation est rationalisée avec un fichier `package.json`, qui spécifie les détails du projet et les packages NPM requis, permettant à d'autres de configurer le projet avec` NPM Install`.
• Browserify est compatible avec les modules ES6 via la transpilation à l'aide de Babel, et prend en charge le débogage avec des cartes source pour retrouver les fichiers source d'origine pour un suivi des erreurs plus facile.

Qu'est-ce que la navigation?

Browserify nous permet d'utiliser des modules de style Node.js dans le navigateur. Nous définissons les dépendances, puis Browserify regroupe le tout dans un seul fichier JavaScript soigné et rangé. Vous incluez vos fichiers JavaScript requis à l'aide de requis ('./ yourfancyjsfile.js') et peut également importer des modules accessibles au public à partir de NPM. Il est également assez simple pour Browserify de générer des cartes source pour vous afin que vous puissiez déboguer chaque fichier JS individuellement, malgré le fait que tout soit rejoint en un.

Pourquoi importer des modules de nœud?

Les modules d'importation sont une bénédiction - plutôt que de visiter une gamme de sites pour télécharger des bibliothèques pour votre JavaScript, il suffit de les inclure en utilisant les instructions requis (), assurez-vous que les modules ont été installés et que vous êtes prêt à partir. Les bibliothèques JavaScript couramment utilisées comme JQuery, Soulignement, Backbone et même Angular (en tant que distribution non officielle) sont toutes disponibles pour travailler. Si vous travaillez sur un site qui exécute déjà le nœud, vous simplifiez encore les choses avec une façon courante de structurer tous vos JS. J'aime vraiment ce concept.

ce dont vous aurez besoin

Pour commencer avec la navigation, le strict minimum dont vous aurez besoin est:

• node.js
• npm - Ceci est installé avec le nœud par défaut.
• Browserify - Je vais expliquer comment installer celui-ci.
• un pack de modules JavaScript que vous êtes prêt à apprivoiser!

Pour commencer

Pour commencer, vous aurez besoin de nœuds et de npm installés sur votre ordinateur. Dirigez-vous vers les liens ci-dessus si vous recherchez des conseils sur les installations. Si vous êtes totalement coincé, essayez ces instructions sur l'installation de Node.js via Package Manager. Vous n'aurez pas besoin de faire du travail de nœud pour utiliser Browserify. Nous installons le nœud uniquement parce que NPM s'enfuit. Une fois que vous avez NPM, vous pouvez installer Browserify en utilisant la commande suivante:

npm install -g browserify

Ce que nous faisons ici, c'est utiliser le NPM pour installer Browserify globalement sur votre machine (le -g dit à NPM d'installer un module mondial).

Si vous obtenez une erreur qui commence par ce qui suit:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Ensuite, vous avez un problème d'autorisation. Vous pouvez sudo la commande, mais je recommande de consulter ce post à la place.

Création de votre premier fichier de navigation

Commençons par créer un fichier JavaScript de navigation qui importe un module extrêmement populaire, souligne. Nous utiliserons un sous-terrain pour retrouver Superman. J'ai appelé mon fichier js main.js et je l'ai placé dans un dossier JS dans mon projet.

Nous commençons par attribuer la variable _ à souligner à l'aide de l'instruction requise () de Browserify dans notre javascript:

<span>var _ = require('underscore');</span>

Ensuite, nous utiliserons les fonctions chacune () et trouver () à partir de soulignement. Nous rechercherons deux tableaux de noms et exécuterons une console.log pour dire si elle voit Superman ou non. Des trucs très avancés par Lex Luthor ne pouvaient que rêver. Notre code JavaScript final ressemblera à ceci:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Nous voulons nous assurer que Browserify peut trouver le module NPM lorsqu'il essaie de l'ajouter à notre projet. Les bases nues de le faire consiste à ouvrir votre terminal, à naviguer dans le dossier qui contient votre projet JavaScript, puis à exécuter cette commande pour installer un soulignement dans ce dossier:

npm install underscore

Pour ceux qui ne connaissent pas le fonctionnement du nœud et du NPM, cela crée un dossier appelé node_modules dans votre projet qui contient le code de votre module de trait de trait. La commande récupère la dernière version de Contrôle du référentiel NPM à https://registry.npmjs.org/underscore. Avec ce module dans notre dossier Node_Modules, Browserify peut maintenant le trouver et l'utiliser.

Exécution de la navigation pour la première fois

Lorsque nous exécutons Browserify, il voudra créer un nouveau fichier JavaScript avec tous nos modules joints. Dans ce cas, il créera un fichier JavaScript avec un soulignement à l'intérieur. Nous devrons décider d'un nom pour ce nouveau fichier, je suis allé avec findem.js. J'exécute cette commande à partir du dossier racine de mon projet:

npm install -g browserify

Cette commande lit votre fichier main.js et le diffuse dans le fichier finm.js défini par l'option -o. J'ai inclus l'option -D afin qu'il générera également une carte source pour nous, de cette façon, nous pouvons déboguer Main.js et souligner proprement en tant que fichiers séparés.

à l'aide de la sortie de navigation

à partir de là, c'est aussi simple que d'inclure le fichier sur votre page comme tout autre fichier JS:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Importation de vos propres fichiers JavaScript

Il est peu probable que toute votre application provienne de modules de nœud. Pour inclure votre propre JavaScript, vous pouvez utiliser la même fonction requis (). La ligne suivante de JavaScript importera un fichier JS appelé your_module.js dans la variable GreatestModuleever:

<span>var _ = require('underscore');</span>

Pour importer notre javascript comme celui-ci, nous avons juste besoin de structurer notre JavaScript en tant que module. Pour ce faire, nous devons définir module.exports. Une façon de le faire est illustrée ci-dessous.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Note latérale!

Si vous avez un tas de bibliothèques JavaScript qui ne sont pas dans NPM et que vous cherchez un moyen plus facile de les mettre dans Browserify, vous pouvez utiliser le module NPM Browserify-Shim pour convertir ces fichiers pour vous . Nous ne l'utiliserons pas dans cet article, mais certains développeurs pourraient être désireux de donner un coup.

Notre exemple avec un module

Pour donner un exemple simple de la façon dont cela fonctionne, nous supprimerons les tableaux de l'exemple de recherche de super-héros précédent et les remplacerons par un module JS distinct qui renvoie un tableau de noms. Le module ressemble à:

npm install underscore

Ensuite, nous importerons ce module dans notre code à l'aide de noms = require ('./ names.js'):

browserify js/main.js -o js/findem.js -d

Nos noms La variable fait référence à la fonction exportée de notre module. Nous utilisons donc la variable de noms ci-dessus comme une fonction avec des supports lorsque nous passons dans le tableau des noms à notre fonction findsUperman ().

Exécutez à nouveau cette commande de navigation de votre ligne de commande pour la compiler, l'ouvrez dans votre navigateur, et elle devrait s'exécuter comme prévu, en recherchant chaque valeur dans le tableau et en enregistrant s'il voit Superman ou non:

passer des variables et des modules de partage sur notre application

Pour ajouter un peu plus de complexité à cette application de chasse Superman assez simple, transformons notre fonction FindSuperman () en module. De cette façon, nous pourrions théoriquement trouver Superman dans diverses parties de notre javascript et nous pourrions toujours remplacer notre module de chasse Superman par un plus efficace à l'avenir assez facilement.

Nous pouvons transmettre des variables à notre module et les utiliser dans notre fonction module.exports, nous allons donc créer un module dans un fichier appelé findsuperman.js qui prévoit de recevoir un tableau de noms:

npm install -g browserify

J'ai ajouté une valeur de retour pour notre fonction finsUperman (). S'il trouve Superman, il reviendra vrai. Sinon, il reviendra faux. C'est au code qui utilise ce module pour décider pour quoi il utilise cette valeur vraie / fausse. Cependant, il nous manque une chose dans le module ci-dessus. Nous utilisons un soulignement dans notre fonction, mais nous ne l'avons pas déclaré. Nous pouvons le déclarer dans le module lui-même également en haut comme:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Lorsque vous utilisez Browserify, il examinera tous vos fichiers JS importés et n'importera que chaque module mentionné une fois. Nous nécessitons donc un soulignement dans notre fichier JS principal et nous l'exigeons dans findsuperman.js, mais lorsque Browserify packages, il ne le met dans notre fichier JS final une fois. Assez soigné, non?

Notre application JavaScript réelle utilisera désormais notre nouveau module avec sa nouvelle valeur True / Faux renvoyée. À des fins de démonstration, nous nous en tiendrons simplement à un document simple. Écrivez pour dire s'il a trouvé Superman de nos noms:

<span>var _ = require('underscore');</span>

Nous n'avons même plus besoin d'importer des traits de soulignement dans notre fichier JS principal, vous pouvez donc le supprimer sans aucun drame. Il sera toujours importé en fin de compte grâce à son inclusion dans le fichier findsuperman.js.

Gestion des dépendances NPM de Browserify avec package.json

Dites que vous avez un ami passionné qui aime également utiliser votre code. Il serait un peu difficile de s’attendre à ce qu’ils sachent qu’ils doivent d'abord installer le module de soulignement NPM. La solution à cela consiste à créer un fichier appelé package.json à la racine de votre projet. Ce fichier donne à votre projet un nom (assurez-vous qu'il n'y a pas d'espaces dans le nom ici), description, l'auteur, la version et surtout dans notre cas - une liste des dépendances NPM. Pour ceux qui se sont développés avec le nœud, nous utilisons exactement les mêmes choses ici:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

La liste des dépendances est actuellement limitée à notre seul "soulignement": "1.6.x", où la première partie de la dépendance est le nom et la deuxième partie est la version. Le dernier ou * récupérera la dernière version NPM a. Alternativement, vous pouvez mettre des nombres tels que 1.6 (pour la version 1.6) et 1.6.x (pour les versions 1.6.0 jusqu'à mais non 1.7).

Nous pouvons également inclure la navigation de navigation en tant que dépendance, mais il n'est pas une dépendance à exécuter pour le projet - tout utilisateur de notre application peut trouver Superman sans avoir besoin d'exécuter Browserify. C'est l'une de nos DevDependces - Modules requis pour que les développeurs puissent faire des mises à jour de cette application.

Maintenant, nous avons un fichier package.json, nous n'avons pas besoin de faire en sorte que notre ami exécute NPM Install Instruction. Ils peuvent simplement exécuter l'installation de NPM et toutes les dépendances nécessaires seront installées dans leur dossier Node_Modules.

Automatisation du processus de navigation

Exécuter Browserify dans la ligne de commande à chaque fois que vous modifiez le fichier est ennuyeux et pas du tout pratique. Heureusement, il existe quelques options disponibles pour automatiser le fonctionnement de la navigation.

npm

NPM lui-même est capable d'exécuter des scripts de ligne de commande comme ceux que vous avez tapés manuellement. Pour ce faire, placez simplement une section scripts dans votre package.json comme:

npm install -g browserify

Pour exécuter cela, vous pouvez taper ce qui suit dans votre ligne de commande:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

mais ce n'est pas assez pratique. Nous devons toujours exécuter cette commande manuellement à chaque fois. C'est ennuyeux. Une meilleure option consiste donc à utiliser un module NPM appelé Watchify. Watchify est simple, c'est facile et c'est un énorme gain de temps. Il surveillera les modifications de votre JS et de votre navigation de réédition automatique.

pour y mettre dans notre package.json, nous l'ajouterons à nos DevDependces et incluons un nouveau script pour regarder notre JS (laissez Build-js là-bas où nous voulons construire notre JS sans avoir besoin de changer le fichier).

<span>var _ = require('underscore');</span>

Pour exécuter ceci, tapez simplement la commande suivante.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Il fonctionnera et travaillera sa magie. Cela ne dit pas grand-chose pour vous faire savoir ce qui se passe, ce qui peut être déroutant. Si vous préférez que cela vous donne des détails sur ce qu'il fait, ajoutez -v à votre commande watchify comme ainsi:

npm install underscore

Cela vous donnera des commentaires comme celui-ci à chaque fois qu'il fonctionne:

browserify js/main.js -o js/findem.js -d

Génération de cartes source dans NPM

pour générer des cartes source à l'aide de NPM, ajoutez -D après votre commande de navigation ou de surveillance:

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

pour avoir à la fois le -d pour le débogage et -v pour la sortie verbeux dans watchify, vous pouvez les combiner comme:

greatestModuleEver <span>= require('./your_module.js');</span>

grogn

Beaucoup de gens (moi y compris) utilisent un grognement depuis un certain temps maintenant et y sont assez habitués. Heureusement, pour ces sortes, Browserify joue bien avec Grunt Builds aussi!

Nous devrons modifier notre fichier package.json afin d'utiliser Grunt. Nous n'utiliserons plus la section Scripts, et nous compterons plutôt sur le grognement pour cela. Au lieu de cela, nous ajouterons quelques nouvelles DevDependces:

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

Nous avons ajouté à nos dépendances:

• Grunt - Pour nous assurer que nous avons un grognement installé pour le projet.
• grunt-browserify - le module qui vous permettront d'exécuter la navigation à l'intérieur du grognement.
• Grunt-Contrib-watch - le module qui regardera nos fichiers et exécutera la navigation à chaque fois qu'ils changent.

Nous créons ensuite un fichier appelé gruntfile.js à la racine de notre projet. À l'intérieur de ce fichier grogn, nous aurons ce qui suit:

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

Nous commençons dans notre fichier grogn en chargeant les modules NPM dont nous avons besoin dans notre fichier package.json:

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Nous enregistrons notre seul et unique groupe de tâches que nous aimerions exécuter en tant que tâche par défaut (Browserify and Watch):

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

Nous avons configuré notre objet Grunt InitConfig (tous les fichiers grogn recherchent cela):

<span>var _ = require('underscore');
</span>
module<span>.exports = function (values) {
</span>  <span>...</span>

En cela, nous soulignons où est notre fichier package.json:

npm install -g browserify

Nos paramètres de navigation sont les suivants et ils sont essentiellement configurés où notre fichier JS source est avec notre code de navigation et le fichier que nous aimerions être construits pour:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Nous avons ensuite configuré une tâche de surveillance pour relancer notre tâche de navigation chaque fois que quelque chose change dans le dossier JS:

<span>var _ = require('underscore');</span>

En raison de nos nouvelles DevDependces (nous n'avons pas d'installation de grogne dans notre projet, et nous n'avons pas aucun de ces modules), nous devrons d'abord installer NPM. Une fois que vous l'avez permis d'exécuter et d'installer tous les modules, vous pouvez ensuite exécuter le très simple gruntcommand pour le faire commencer à regarder votre projet.

Génération de cartes source en grogn

Avec la version 2.0.1 de Grunt-Browserify, la façon dont les cartes source doivent être définies ont modifié, ce qui a fait que beaucoup de guides en ligne sont incorrects! La bonne façon d'obtenir un grognement et une navigation pour générer des cartes source pour vous est d'ajouter de débogage: vrai à l'intérieur bundleoptions dans des options comme SO:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Cette configuration d'options de recherche compliquée est destinée à permettre l'inclusion de futures options de navigation d'une manière agréable et facilement compatible.

Gulp

Gulp est l'amant tabloïd de Browserify. Les articles sur le Web associent les deux assez souvent, Browserify et Gulp - le processus de construction JavaScript de pointe fabriqué dans le paradis. Je ne dirais pas que les fans de navigation doivent utiliser Gulp, c'est surtout une préférence personnelle entre les différentes syntaxes. Vous pouvez (comme vous l'avez vu ci-dessus) utiliser avec plaisir NPM ou Grunt pour construire votre fichier de navigation. Je suis personnellement fan du processus de construction NPM propre et simple pour les petits projets.

Pour faire ce qui précède dans Gulp, nous allons commencer par installer Gulp Globally:

npm install underscore

Nous mettrons à jour notre fichier package.json pour inclure quelques nouvelles DevDependces dont nous aurons besoin:

browserify js/main.js -o js/findem.js -d

Nous avons ajouté ce qui suit:

• watchify - Nous l'avons également utilisé ci-dessus dans l'exemple NPM. Même module.
• Gulp - Le module assez important pour nous donner toute cette gorgée!
• Vinyl-Source-Stream - Il s'agit du module qui prendra une entrée et renvoyer un fichier pour nous pour mettre quelque part.

Browserify a une API de streaming pour sa sortie que nous pouvons utiliser directement dans Gulp. Un tas de guides suggéreront d'utiliser le plugin Gulp-Browserify, mais Browserify ne recommande pas cela et préfère nous en utilisant la sortie de l'API de streaming de Browserify. Nous utilisons la ruelle en vinyle pour récupérer cette sortie de navigation et la placer dans un fichier pour que nous puissions sortir quelque part.

Nous créons ensuite un fichier appelé gulpfile.js à la racine de notre projet. C'est là que toutes les fonctionnalités de Gulp iront:

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

Nous commençons par importer dans nos modules NPM qui sont assez explicites. Nous définissons ensuite trois variables pour notre construction:

• SourceFile - l'emplacement et le nom de fichier de notre fichier de navigation (dans ce cas js / main.js)
• Destfolder - L'emplacement du dossier Nous publions le fichier final vers
• destfile - Le nom de fichier que nous voulons que notre fichier final ait

Je vais expliquer le code dans un peu plus de détails ci-dessous.

comment la navigation et la gorgée fonctionnent ensemble

Notre première tâche est notre Browserify que nous définissons comme:

npm install -g browserify

Il passe d'abord notre fichier main.js dans le module NPM de Browserify:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Nous utilisons ensuite l'API de streaming de navigation pour renvoyer un flux lisible avec notre contenu javascript:

<span>var _ = require('underscore');</span>

À partir de là, nous le gardons dans un fichier avec le nom de fichier findem.js, puis le gardons pour gloquer pour mettre dans notre dossier JS.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Nous prenons essentiellement notre contribution à travers différentes étapes qui élaborent dans notre projet final qui devrait être un nouveau fichier javascript brillant!

combinant watchify et gulp

Comme appris précédemment, il est un peu ennuyeux d'utiliser directement la navigation car il est beaucoup plus facile de le faire fonctionner automatiquement lorsque vous mettez à jour le fichier. Pour ce faire, nous utilisons à nouveau le module NPM Watchify.

Nous commençons par configurer une tâche appelée Watch (vous pouvez l'appeler regarder si vous le souhaitez… c'est vraiment à vous ici):

npm install underscore

Nous attribuons le module Watchify à la variable Bundler car nous l'utiliserons deux fois:

browserify js/main.js -o js/findem.js -d

Nous ajoutons ensuite un gestionnaire d'événements qui exécute une fonction appelée Rebundle () chaque fois que l'événement de mise à jour est appelé. Fondamentalement, chaque fois que Watchify voit le changement de fichier, il exécutera Rebundle ():

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

Alors qu'est-ce que Rebundle ()? C'est à peu près exactement ce que faisait notre tâche de navigation ci-dessus:

greatestModuleEver <span>= require('./your_module.js');</span>

Il serait possible de fusionner à la fois de la navigation et de surveiller ensemble dans une optimisation passionnée de JavaScript, mais j'ai décidé de les laisser séparément dans cet article pour garder les choses simples. Pour un exemple impressionnant et plus complexe de cela, consultez le fichier de démarrage de Dan Tello.

Pour terminer notre gulpfile.js, nous définissons notre tâche par défaut qui fonctionne de la même manière que la tâche par défaut dans Grunt.

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

Pour exécuter le code Gulp ci-dessus, vous avez trois options. Le moyen le plus simple consiste à exécuter cette tâche par défaut que vous avez faite, ce qui ne nécessite qu'un seul mot sur la ligne de commande:

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

qui exécutera la tâche de navigation une fois et la tâche de montre commencera à regarder les fichiers pour toutes les modifications.

Vous pouvez également exécuter spécifiquement votre tâche de navigation:

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

ou votre tâche de montre:

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

Génération de cartes source à l'aide de Gulp et de Browserify

pour générer une carte source pour votre javascript, incluez {debug: true} dans les deux fonctions bundle ().

Notre tâche de navigation aurait l'air:

<span>var _ = require('underscore');
</span>
module<span>.exports = function (values) {
</span>  <span>...</span>

La fonction Rebundle () dans notre tâche de surveillance serait ainsi:

npm install -g browserify

Conclusion

Il est encore assez tôt pour la navigation et il évoluera et mûra sûrement au fil du temps. Dans son état actuel, c'est déjà un outil très pratique pour structurer votre JavaScript modulaire et est particulièrement brillant pour ceux qui utilisent le nœud sur leur backend. Le code devient beaucoup plus propre pour les développeurs de nœuds lors de l'utilisation de modules NPM à la fois avant et arrière d'un projet. Si vous n'avez pas donné de cliché sur Browserify, essayez-le dans votre prochain projet JavaScript et voyez si cela secoue votre monde.

Autres ressources

Il existe une tonne d'autres ressources de navigation. Quelques morceaux pratiques que vous voudrez peut-être vérifier:

• The Browserify Handbook - James Halliday’s’s A So précieux manuel pour commencer avec Browserify. Vaut vraiment la peine!
• Gulp Browserify: The Everything Post de Dan Tello - Article vraiment complet montrant des usages plus avancés.
• Et comme ce grognement et les obligations sont sortis, tout est question de gorgée et de navigation maintenant - Martin Genev parle de sa conversion soudaine en navigation et en gorgeant avec un exemple.
• Une introduction à Gulp.js - Plus d'informations sur la façon d'utiliser Gulp par Craig Buckler.

Les questions fréquemment posées (FAQ) sur le début de la navigation

Quel est l'objectif principal de Browserify?

Browserify est un outil de développement qui permet aux développeurs d'écrire des modules de style Node.js qui compilent pour une utilisation dans le navigateur. Avec Browserify, vous pouvez exiger («modules») dans le navigateur en regroupant toutes vos dépendances. Cet outil est particulièrement utile car il vous permet d'utiliser la plupart des packages NPM directement dans le navigateur, ce qui peut accélérer considérablement le processus de développement.

En quoi la navigation diffère-t-elle des autres bundlers de modules?

Contrairement aux autres bundlers de modules, Browserify a été spécialement conçu pour permettre aux développeurs d'écrire des modules de style Node.js pour le navigateur. Il le fait en analysant récursivement tous les appels requis () dans votre application afin de créer un bundle que vous pouvez servir au navigateur dans une seule balise de script. Browserify dispose également d'un riche écosystème de plugin, qui vous permet de personnaliser votre version dans une large mesure.

Comment puis-je installer Browserify?

Vous pouvez installer Browserify globalement sur votre système à l'aide de NPM (nœud Gestionnaire de packages). La commande est «NPM Install -g Browserify». Une fois installé, vous pouvez l'utiliser à partir de la ligne de commande pour regrouper vos fichiers javascript.

Comment utiliser Browserify dans mon projet?

Pour utiliser Browserify, vous devez d'abord écrire votre code en utilisant Le format du module CommonJS. Ensuite, vous pouvez utiliser Browserify à partir de la ligne de commande pour regrouper votre fichier JavaScript principal ainsi que toutes ses dépendances en un seul fichier. Ce fichier groupé peut ensuite être inclus dans votre fichier html à l'aide d'une balise de script.

Puis-je utiliser des modules ES6 avec Browserify?

Oui, vous pouvez utiliser des modules ES6 avec Browserify, mais vous devrez utiliser un transpile comme Babel pour convertir votre code ES6 en code ES5 que Browserify peut comprendre . Vous pouvez le faire en installant Babel et la transformée Babelify, puis en les utilisant dans votre commande de navigation.

Comment puis-je utiliser les packages NPM dans le navigateur avec Browserify?

Avec Browserify, vous pouvez Utilisez la plupart des packages NPM directement dans le navigateur. Pour ce faire, vous devez d'abord installer le package à l'aide de NPM. Ensuite, vous pouvez avoir besoin du package dans votre fichier JavaScript, et Browserify s'assurera qu'il est inclus dans votre bundle.

Quelles sont les transformations dans Browserify?

Les transformations sont des plugins qui utilisent des utilisations pour compiler ou compiler ou Transformez votre code. Par exemple, vous pouvez utiliser la transformation Babelify pour compiler votre code ES6 en code ES5. Les transformations peuvent être appliquées à l'échelle mondiale ou en fichiers spécifiques, et vous pouvez utiliser plusieurs transformations dans votre projet.

Comment puis-je déboguer mon code groupé?

Browserify a une option intégrée pour générer une source Cartes, qui peuvent vous aider à déboguer votre code groupé. Pour générer une carte source, vous pouvez utiliser l'option «–Debug» dans votre commande de navigation. Cela inclura les données de mappage source dans votre paquet, qui peuvent ensuite être utilisées par les outils de développeur du navigateur pour vous aider à déboguer votre code.

Puis-je utiliser Browserify avec un coureur de tâche comme Gulp ou Grunt?

Oui, vous pouvez utiliser Browserify avec des coureurs de tâches comme Gulp ou Grunt. Gulp et Grunt ont des plugins disponibles qui peuvent être utilisés pour intégrer la navigation dans votre processus de construction. Cela peut aider à automatiser le processus de regroupement de vos fichiers JavaScript.

Comment puis-je optimiser mon bundle pour la production?

Il existe plusieurs façons d'optimiser votre pack de navigation pour la production. Une méthode courante consiste à réduire votre bundle à l'aide d'un outil comme uglifyjs. Vous pouvez également utiliser le plugin «Tinyify», qui est un plugin de navigation qui applique diverses optimisations à votre bundle pour la rendre aussi petite que possible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!