Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

SystemJS e JSPM

Olá, eu comecei a seguir um tutorial, mas parece que esses bundle, packages, etc, estão sendo sempre atualizados, então o que saiu o ano passado, esse ano não funciona mais.

Minha dúvida é como funciona esse Systemjs?

Porque apareceu um erro no console que eu não consigo resolver, porque não sei SystemJS.

Até instalei jspm, para instalar um plugin do babel e não consegui fazer funcionar.

Era para ser uma simples configuração de path, mas não funciona e pede para usar um transpiler, coloquei o transpiler e mesmo assim não funciona, como o SystemJS faz o transpiler do ES6?

Só com essa linha System.import('src/app.js'), funcionava.

<script>
      System.config({
      transpiler: "babel",
      map: {
        "babel": "./node_modules/babel-core/lib/api/browser.js",
        "jquery": "./node_modules/jquery/dist/jquery.js"
      }
    }) 

    System.import('jquery');
    System.import('src/app.js');
  </script>
</body>

Erro:

system.js:4 Uncaught (in promise) Error: Fetch error: 404 Not Found Instantiating http://localhost:3000/node_modules/babel-core/lib/api/node Loading http://localhost:3000/node_modules/babel-core/lib/api/browser.js Loading babel Unable to load transpiler to transpile http://localhost:3000/src/app.js Instantiating http://localhost:3000/src/app.js Loading src/app.js at system.js:4 at

4 respostas

Olá Gisele, tudo bom?

Pode dizer qual tutorial você seguiu?

Mas já oferecendo um caminho, caso queira utilizar uma estrutura de desenvolvimento com ES6 transpilando código eu recomendo você utilizar o Gulp inicialmente, caso não conheça a ferramenta, o curso daqui da Alura pode ti dar um guia bem legal sobre como a ferramenta funciona. E para converter os códigos javascripts ES6 pra ES5 eu recomendo esse plugin do gulp: https://www.npmjs.com/package/gulp-babel

Espero ter ajudado :)

Olá obrigada por responder, na verdade é um curso online de curta duração sobre ES6, eu já fiz cursos de ES6 e Gulp aqui da Alura, mas eu estou fazendo outros para conhecer as outras opções de ferramentas.

Nesse outro curso utiliza OOP com ES6 e para fazer o transpiler utiliza o SystemJS, como eu já vi mais pessoas utilizando, fui buscar informação, mas quando tem erro, não se acha muita coisa a respeito, eu vi que eles estão sempre atualizando também. Parece que o Angular 2 utiliza, mas agora ele tem o CLI que facilita.

Mas eu estou achando melhor o Webpack que ele já faz tudo isso.

A solução que eu encontrei foi instalar o jspm que é um package manager e o plugin-babel, depois configurei o SystemJS com o comando jspm init -p que cria um arquivo de configuração no mesmo estilo que o package.json com npm init, funcionou.

Agora eu estou tentando entender porque aparece um erro ao carregar o script do Google Maps, parece que tem um problema de ser assincrono e tem que saber a ordem de carregamento, tem configuração...

message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new mc (https://maps.googleapis.com...

solução!

Fala Gisele tudo bom?

Bom, compartilho do seu ponto e vejo o Webpack como melhor solução para trabalhar com módulos utilizando JavaScript, e é o que o mercado vem trabalhando em massa (principalmente com projetos utilizando os frameworks mais atuais como React, Vue e o próprio Angular no angular-cli).

Se quiser, aqui tem um artigo bem bacana dando um exemplo configurando o webpack e utilizando o Google Maps http://jimfrenette.com/2017/03/google-maps-api-with-webpack/

Obrigada, vou olhar o link.