CODEWITHSUNDEEP
javascriptangularrollupjses5-shimreflect-metadata
lecogiteur
lecogiteur

Reputation: 467

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

Upvotes: 0

Views: 3224

Answers (3)

Rich Harris
Rich Harris

Reputation: 29585

Add the rollup-plugin-node-resolve plugin, and you'll be able to bundle any dependencies that live in your node_modules folder including polyfills. You may also need to include rollup-plugin-commonjs.

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52837

I use gulp this way:

gulp.task('bundle:vendor', function() {
    return gulp
        .src([
            "node_modules/core-js/client/shim.min.js",
            "node_modules/zone.js/dist/zone.js"
        ])
        .pipe(concat("vendor.bundle.js"))
        .pipe(gulp.dest('dist'));

});

Upvotes: 0

rob
rob

Reputation: 18513

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.

Upvotes: 1

Related Questions