Fala ai Alexsandra, tudo bem? Para realizar essa configuração vai exigir muito esforço e atualmente a gente não usa mais o SystemJS, é muito dificil, isso porque existem melhores práticas para trabalhar com módulos, no caso Webpack.

Caso queira, no meu tenho dois vídeos explicando e falando sobre Webpack:

• https://www.youtube.com/playlist?list=PLt28SuGsHXH052iLK0kjUlRodmHmVD8QV

E aqui na Alura também temos curso do mesmo, porém, está um pouco desatualizado, mas, vale a pena o conhecimento:

• https://cursos.alura.com.br/course/webpack

Sendo assim, acho que o ideal seria você manter a versão do Babel e bibliotecas do curso e nos próximos projetos fazer com o Babel e Webpack mais novo (caso sejam projetos complexos que precisem deles).

Se for projetos mais simples, temos outros meios.

Espero ter ajudado.

Muito obrigada pela resposta Matheus.

Eu havia tentado usar o Webpack outra vez com um site estático, mas acabei achando muito complicado de usar (configurar o carregamento e imagens SVG, criar bundles diferentes de CSS e JS, etc) em comparação ao Gulp, que já usei em outra ocasião. O curso aqui da Alura eu achei meio complicado também e não resolvia o que eu queria fazer no site estático.

De qualquer forma vou olhar sua playlist pra ver se me ajuda.

Para o projeto atual, como é apenas o projeto do curso, acabei deixando sem a importação dos polyfills mesmo, mas usando o babel 7.8+ com o SystemJS.

Obrigada mais uma vez!

Magina Alexsandra.

Realmente, o Webpack para sites estáticos nem faz sentido ser utilizado, para esses cenários recomendaria o Gulp mesmo.

O Webpack é bom para problemas mais arquiteturas/cenários mais complexos.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Matheus, eu consegui fazer a configuração necessária para o Babel 7.8+ rodar com core-js3 para os polyfill no SystemJS (questão inicial do tópico).

Segue a configuração:

System.config({
            paths: {
                // paths serve as alias
                'npm:': 'node_modules/'
            },
            map: {
                "@babel": "npm:@babel",
                "core-js-pure": "npm:core-js-pure"
            },
            packages: {
                "build/js": {
                    defaultExtension: "js"
                },
                "@babel": {
                    defaultExtension: "js"
                },
                "core-js-pure/stable/instance": {
                    defaultExtension: "js",
                    main: "bind"
                },
                "core-js-pure/es/instance": {
                    defaultExtension: "js",
                    main: "bind"
                },
                "core-js-pure/stable/promise": {
                    defaultExtension: "js",
                    main: "index"
                },
                "core-js-pure/symbol": {
                    defaultExtension: "js",
                    main: "index"
                },
                "core-js-pure/features/symbol": {
                    defaultExtension: "js",
                    main: "index"
                },
                "core-js-pure/es/promise": {
                    defaultExtension: "js",
                    main: "index"
                },
                "core-js-pure/es/symbol": {
                    defaultExtension: "js",
                    main: "index"
                },

                "core-js-pure/stable": {
                    defaultExtension: "js",
                },
                "core-js-pure/es": {
                    defaultExtension: "js",
                },
                "core-js-pure/modules": {
                    defaultExtension: "js",
                },
                "core-js-pure/internals": {
                    defaultExtension: "js",
                },
                "core-js-pure/features": {
                    defaultExtension: "js",
                }
            }
        });

Primeiro defini um alias para o "node_modules" chamado "npm" no paths da configuração. Depois, nos packages, defini cada modulo que a aplicação estava importando automaticamente do core-js e defini da extensão padrão e, em alguns casos, o "main".

O problema dessa abordagem é que é preciso ficar adicionando novos mapeamentos a medida que novos polyfills sejam usados.

Fiz essa solução com base na configuração do Firebase para Angular. Peguei daqui: https://github.com/angular/quickstart/blob/master/src/systemjs.config.js http://www.fabricadecodigo.com/como-criar-um-aplicativo-com-firebase-realtime-database-e-angular/

Muito bom Alexsandra, parabéns pela solução e obrigado por compartilhar.

Abraços e bons estudos.