web-dev-qa-db-fra.com

Comment inclure node_modules dans un bundle de navigateur distinct

J'essaie de convertir une application AngularJS pour qu'elle utilise browserify. J'ai installé tous mes paquets bower dans node_modules en utilisant napa. Maintenant, je souhaite les parcourir dans un ensemble de fournisseurs distinct et les déclarer en tant que dépendances "externes". Je voudrais leur donner des pseudonymes, de sorte que je puisse "exiger (" angulaire ")" au lieu de "nécessite (" angulaire/angulaire ")", comme il semble que vous puissiez le faire avec des éléments externes. 

Les exemples que j'ai vus (par exemple http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ ) supposent tous que j'ai téléchargé les fichiers du fournisseur dans un répertoire "lib". Je veux simplement regrouper mes fichiers fournisseurs à partir de node_modules. Il semble que cela devrait être facile mais je ne vois pas comment le faire.

node.jsangularjsbrowserify
23
kpg

J'essayais juste de faire la même chose. Je pense que vous devez utiliser --require pour le groupe de fournisseurs et --export pour les applications afin que les dépendances ne soient pas regroupées deux fois.

Cela a fonctionné pour moi en utilisant les API et les gulp de browserify (lodash et pixijs étant mes node_modules):

var gulp = require('gulp');
var browserify = require('browserify');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');


gulp.task('libs', function () {
  return browserify()
    .require('lodash')
    .require('pixi.js')
    .bundle()
    .on('error', handleErrors)
    .pipe(source('libs.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function () {
  return browserify('./src/main.js')
    .external('lodash')
    .external('pixi.js')
    .bundle()
    .on('error', handleErrors)
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('watch', function(){
  gulp.watch('src/**', ['scripts']);
});

gulp.task('default', ['libs', 'scripts', 'watch']);

Bien sûr, cette solution est difficile à maintenir ... J'ai donc corrigé avec browserify pour accepter les tableaux dans require et external et ensuite vous pouvez le faire, ce que je pense que c'est beaucoup mieux:

var gulp         = require('gulp');
var browserify   = require('browserify');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');

var packageJson = require('../../package.json');
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});


gulp.task('libs', function () {
  return browserify()
    .require(dependencies)
    .bundle()
    .on('error', handleErrors)
    .pipe(source('libs.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function () {
  return browserify('./src/main.js')
    .external(dependencies)
    .bundle()
    .on('error', handleErrors)
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

gulp.task('watch', function(){
  gulp.watch('package.json', ['libs']);
  gulp.watch('src/**', ['scripts']);
});

gulp.task('default', ['libs', 'scripts', 'watch']);

C'est le meilleur que je puisse trouver ... S'il vous plaît, dites-moi si vous trouvez un meilleur moyen.

36
Oscar Morante

Je suis aussi confronté à ce problème. Parce que c’était un fichier énorme lorsque toutes les bibliothèques de fournisseurs se trouvaient dans le même fichier. Donc, navigateur toujours coincé avec le téléchargement de plus de 10 Mo de fichier. La minification de fichiers n'était pas non plus une solution, car la compilation nécessitait plus de temps et que cela n'était pas utile pour le développement. 

J'ai conservé vendor.js et app.js pour des modules de nœud et des scripts d'application distincts. C'est comme ça. 

Exemple vendor.js (src/app/vendor.js)

/**
 * Node modules
 */
require('angular');
require('angular-cookies');
require('angular-ui-router');
require('angular-aria');
require('angular-animate');
....

Exemple app.js (src/app/app.js)

/**
 * App Common Modules
 */
require('./modules/about/about.routing.js');
require('./modules/home/home.routing.js');

/**
 * Services
 */
require('./shared/services/order.js');
require('./shared/services/product.js');


/**
 * Directives
 */
require('./shared/directives/dropzone.js');
require('./shared/directives/tab-change.js');


angular
    .module('myApp', [
        //------------- Node modules ------------//
        'ui.router',
        'ngMaterial',


        //------------- App Common modules ------------//

        //About
        'cloudDecor.routing.about',
        'cloudDecor.controller.about',


        //Home
        'cloudDecor.routing.home',
        'cloudDecor.controller.home',


        //------------- Services --------------//

        'cloudDecor.service.order',


        //------------- Directives ------------//
        'cloudDecor.directive.dropzone',
        'cloudDecor.directive.tab-change'

    ]);

gulpfile.js

var gulp = require('gulp'),   
    browserify = require('browserify'),
    uglify = require('gulp-uglify'),
    buffer = require('vinyl-buffer');


//App js
gulp.task('app_js', function() {
    // Grabs the app.js file
    browserify({
            entries: ['./src/app/app.js'],
            debug: true
        })
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./build/'));
});

//Vendor js
gulp.task('vendor_js', function() {
    // Grabs the app.js file
    browserify({
        entries: ['./src/app/vendor.js']
    })
    .bundle()
    .pipe(source('vendor.min.js'))
    .pipe(buffer())
    .pipe(uglify({ mangle: false }))
    .pipe(gulp.dest('./build/'));
});

gulp.task('default', ['app_js', 'vendor_js']);

Assurez-vous d'inclure vendor.js avant d'utiliser main.js dans index.html

<html>
<body>

<!--Vendor js, See src/vendor.js-->
<script type="text/javascript" src="vendor.min.js"></script>

<!--App scripts, See src/app.js-->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
0
Dinuka Thilanga

Cette solution a fière allure:

var packageJSON = require('./package.json');
var dependencies = Object.keys(packageJSON && packageJSON.dependencies || {});

gulp.task('vendor', function() {
   return browserify()
    .require(dependencies)
    .bundle()
    .pipe(source('vendor.bundle.js'))
    .pipe(gulp.dest(__dirname + '/public/scripts'));
});
0
Alena Kastsiukavets