Gulp : Error : 복수 익명 System.register (모듈에서 호출)를 사용하여 각도 2의 시스템 가져 오기에서 번들 파일을로드하는 방법

Question

js 파일을 생성하는 typescript가있는 각도 2 응용 프로그램이 있습니다.

최근에 npm과 gulp를 설치하고 js 파일을 모두 하나로 묶어서 단일 파일로로드하는 방법을 설명했습니다. 이전 내 index.html 페이지에서

: // 메인이 appComponent

부트 스트랩 구성 요소입니다 작동하는

<script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js', 
        defaultJSExtensions: true 
       } 
      } 
     }); 
     debugger; 
     //System.import('Scripts/main') 
     System.import('app/V1/components/main') 
       .then(null, console.error.bind(console)); 
    </script> 

내 꿀꺽 작업 :

var config = { 
    src: ['app/**/*.js'], 
    dest: ['Scripts/'] 
}; 

gulp.task('bundle', function() { 

    console.log('testing'); 
    return gulp.src(config.src) 
     .pipe(uglify()) 
     .pipe(concat('all.min.js')) 
     .pipe(gulp.dest('app/')); 
}) 

나는이 꿀꺽 꿀꺽 작업을 실행할 때 그것은 all.min.js를 생성하지만 이것을 사용하는 방법 즉, System.import에서 main.js를 제거하고로드하는 방법입니다.

<script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js', 
        defaultJSExtensions: true 
       } 
      }, 
      map: { 
       immutable: 'app/all.min.js' 
      } 
     }); 
     debugger; 
     //System.import('Scripts/main') 
     System.import('app/all.min') 
       .then(null, console.error.bind(console)); 
    </script> 

여러 익명 System.register 모듈 http://localhost:55308/app/all.min.js에서 호출 6,

나는

오류로 오류를 던지고있다이 방법을 시도했다. 번들을로드하는 경우 모든 System.register 호출의 이름이 지정되었는지 확인하십시오.

Answer 1

system.js와 함께 사용할 파일을 묶는 더 좋은 해결책이 있다고 생각합니다. systemjs-builder이라는 편리한 라이브러리가 있습니다. 꿀꺽 마심과 함께 쉽게 사용할 수 있습니다.

먼저 system.js 스크립트를 별도의 파일로 추출해야합니다. 그런 다음이 작업을 사용하여 연결된 js를 생성 할 수 있습니다.

gulp.task('system',() => { 
    var builder = new systemBuilder(); 

    return builder.loadConfig('./system.config.js') // Name of your system js file 
     .then(() => builder.buildStatic('app', 'total.js')) 

});

이제는 연결된 파일과이를 실행하는 데 필요한 system.js 구성이 있으므로이 시점에서 모든 것이 잘 작동합니다. 그러나 js를 uglify하기 위해 별도의 라이브러리를 사용해야합니다. gulp-uglify은 정상적으로 작동합니다. 여기

는 예를 들어 작업입니다 : 당신이 gulp build을 실행하고 (다른 모든 스크립트를 제거하는) 당신의 index.html을에의 genrated있는 main.js를 포함하면 지금

gulp.task('build', ['system'],() => { 
    return gulp.src([ 
     'node_modules/core-js/client/shim.min.js', 
     'node_modules/zone.js/dist/zone.js', 
     'node_modules/reflect-metadata/Reflect.js', 
     'node_modules/systemjs/dist/system.src.js', 
     'total.js' 
    ]) 
     .pipe(concat('main.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('./')) 
    }); 

, 모든 작동합니다.