node_modules를 별도의 브라우저에 포함하는 방법벤더 번들

node_modules를 별도의 브라우저에 포함하는 방법벤더 번들

Angular를 변환하려고 합니다.브라우저라이즈를 사용할 JS 앱입니다.napa를 사용하여 node_modules에 모든 bower 패키지를 설치했습니다.이제 이들을 별도의 벤더 번들로 브라우저화하여 '외부' 의존관계로 선언합니다.외부처럼 'require'('angular/angular')가 아니라 'require'('angular')가 될 수 있도록 가명을 붙이고 싶어요.

지금까지 본 예(http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/) 등)에서는 모두 벤더 파일을 「lib」디렉토리에 다운로드하고 있는 것을 전제로 하고 있습니다.node_modules에서 벤더 파일을 번들하기만 하면 됩니다.쉬워야 할 것 같은데 어떻게 하는지 모르겠어요.

저도 같은 일을 하려고 했을 뿐이에요.내 생각엔 네가 이걸 써야 할 것 같아.--require벤더 번들 및--export어플리케이션의 경우 종속성이 두 번 번 번들되지 않도록 합니다.

이것은 browserify의 api와 gulp (lodash와 pixijs는 my 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']);

그게 내가 생각해 낼 수 있는 최선이었어...더 좋은 방법이 있으면 알려주세요.

저도 이 문제에 직면해 있습니다.모든 벤더의 라이브러리가 같은 파일에 있을 때는 큰 파일이었기 때문입니다.그래서 브라우저는 항상 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'

    ]);

guulfile.devails.guulfile.devel

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>

이 솔루션은 훌륭해 보입니다.

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

언급URL : https://stackoverflow.com/questions/22330103/how-to-include-node-modules-in-a-separate-browserify-vendor-bundle