web-dev-qa-db-ja.com

別のbrowserifyベンダーバンドルにnode_modulesを含める方法

AngularJSアプリをbrowserifyを使用するように変換しようとしています。 napaを使用して、すべてのbowerパッケージをnode_modulesにインストールしました。次に、それらを個別のベンダーバンドルにブラウザー化し、「外部」依存関係として宣言したいと思います。私はそれらにエイリアスを与えたいので、外部でできるように、「require（ 'angular/angular'）」の代わりに「require（ 'angular'）」ができます。

私が見た例（例 http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ ）はすべて、ベンダーファイルを 'lib 'ディレクトリ。 node_modulesからベンダーファイルをバンドルするだけです。簡単なようですが、どうすればいいのかわかりません。

node.jsangularjsbrowserify
26
kpg

私はちょうど同じことをやろうとしていました。依存関係が2回バンドルされないように、ベンダーバンドルには--require、アプリケーションには--exportを使用する必要があると思います。

これは、browserifyのapiとgulpを使用して動作しました（lodashとpixijsが私の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']);

もちろん、この解決策は維持するのが面倒です...だから私はbrowserifyにrequireとexternalの配列を受け入れるようにパッチを当てたので、これを行うことができます。

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']);

それは私が思いつくことができる最高のものです...もっと良い方法を見つけたら教えてください。

38
Oscar Morante

私もこの問題に直面しています。すべてのベンダーライブラリが同じファイルにある場合、それは巨大なファイルだったからです。そのため、ブラウザは常に10MBを超えるファイルのダウンロードに行き詰まっています。また、コンパイルに時間がかかり、開発に役立たなかったため、ファイルの縮小も解決策ではありませんでした。

個別のノードモジュールとアプリケーションスクリプト用にvendor.jsとapp.jsを保持しています。こんな感じです。

Vendor.js（src/app/vendor.js）のサンプル

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

サンプル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']);

vendor.jsでmain.jsを使用する前に、必ず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

これは solution に見えます：

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