Comment modulariser facilement Javascript comme C/C++

Question

J'ai un gros projet entièrement construit en JavaScript, j'ai un fichier .js 5k ordonné et "modulaire à l'intérieur" qui est le moteur de tout le site.

Maintenant, je dois faire un autre site (extension de celui-ci) dans lequel je vais devoir répéter beaucoup de code, ma question est, j'ai vu beaucoup de possibilités en utilisant Browserify, CommonJS, etc Mais c'est Je ne cherche pas ce que je cherche, je suis à la recherche de modulariser JavaScript comme C/C++, en faisant #includes avec les fichiers des fonctions ou des fonctionnalités et en réutilisant le code comme ça. Je le fais déjà en incluant d'autres fichiers JS en HTML, mais ces fichiers JS ne sont que des variables et des tableaux, pas des fonctionnalités du site. J'utilise jQuery aussi, dans ce grand fichier .js de 5k lignes, j'ai presque tout dans l'événement jQuery document.ready, cela pose aussi des problèmes, car je vais devoir créer un événement document.ready pour chaque fichier.

J'ai besoin d'orientation s'il vous plaît

Answer 1

CommonJS vous permettra require() modules, c'est la base du système de module NodeJS. Browserify simplifie cette implémentation pour une utilisation dans les navigateurs et vous permet même d'exiger des modules Node (tant qu'ils ne dépendent pas des binaires, du système de fichiers et d'autres fonctionnalités qu'un navigateur ne supporte pas).

var lib = require('someLibrary'); 

ECMAScript6 (alias: ES6) permet d'importer des données en javascript. Bien que les navigateurs ne prennent pas encore complètement en charge ES6, vous pouvez utiliser Babel pour "transpiler" ES6 vers ES5. Cet ES5 tirera parti de CommonJS pour répliquer le comportement d'importation.

import { SomeClass, someFunction, someValue } from 'some/library'; 

Dans tous les cas, votre javascript exigera une sorte de pré-traitement à elle transpile dans javscript un navigateur peut comprendre. Cela signifie généralement prendre tous vos fichiers source distincts et les regrouper dans un seul fichier bundle minifié. Cela réduit le nombre de requêtes que le navigateur doit effectuer.

Pour gérer tous ces transpiling et bundling, plusieurs systèmes de construction populaires existent, y compris Grunt, Gulp et Webpack. Grunt est plus ancien et généralement plus lent en raison de sa conception basée sur la configuration. Gulp est plus simple et plus rapide car il s'appuie sur les flux NodeJS. Webpack est le plus récent et le plus puissant, mais au prix de la complexité. Pour ce que vous espérez faire, je vous recommande de regarder Webpack car il peut modulariser non seulement votre javascript mais aussi vos feuilles de style et autres ressources web.

http://webpack.github.io/docs/tutorials/getting-started/

Answer 2

Utilisez webpack empaqueter votre code http://webpack.github.io/docs/tutorials/getting-started/