javascriptangularrollupjses5-shimreflect-metadata

How bundle polyfills and external library with Rollup JS?


It's my first application with Angular 2.

We run aot and rollup in order to generate a bundle. But we must always add polyfills (shim, reflect-metadata and zone.js) to the index.html with script HTML element.

Is it possible to add this polyfills to the bundle?

Another question: How add external JS libraries to the bundle. Actually, like polyfills we must add them to the index.html


Solution

  • You can create a separate bundle for globals and polyfills with something like gulp or webpack and include it your index.html. e.g. with gulp you could do

    let globalJs = gulp.series(
        function cleanGlobalJs() {
            return del('dist/global*.js')
        },
        function BuildGlobalJs() {
    
            return gulp.src([
                'node_modules/core-js/client/shim.min.js',
                'node_modules/zone.js/dist/zone.min.js'
            ])
                .pipe(concat('global.js'))
                .pipe(rev())
                .pipe(gulp.dest('dist'));
        }
    );
    

    This is taken from an angular build I setup with rollup here https://github.com/robianmcd/hello-angular-rollup/blob/master/gulpfile.js#L125-L139

    If you really wanted one bundle you could just concatenate this bundle with the one from rollup.