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

Transcompilação do projeto para ES2015 sem uso do plugin do SystemJS

Por curiosidade, realizei a compilação do projeto sem a utilização do plugin de transformação do SystemJS para ver qual o erro gerado.

Segue abaixo meu arquivo .babelrc

{
  "presets": ["es2015"]
  //"plugins": ["transform-es2015-modules-systemjs"]
}

Porém o projeto rodou sem nenhuma ocorrência de erro.

A estrutura montada pelo plugin deveria ser essencial neste projeto?

Até mais

12 respostas

Teve alguma mensagem no terminal? Se houve algum erro de compilação os arquivos antigos continuaram disponíveis dando a ilusão de que foram transcompilados. Até onde eu sei é necessário preparar os módulos para o system.js.

Fábio, se você remove a adequação dos módulos para o System.js você receberá no navegador, Chrome a mensagem de erro:

localhost/:57 Error: Unable to dynamically transpile ES module
   A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.
  Instantiating http://localhost:3000/app/app.js
  Loading app/app.js
    at Ye (system.js:4)
    at system.js:4

Não há erro no processo de compilação, há erro é no carregamento do módulo pelo System.js.

Se no seu caso funcionou, é porque seu projeto esta carregando arquivos compilados antigos, não vejo outra explicação (ou houve algum erro de compilação no seu projeto que não deixei gerar os novos arquivos e eles não foram atualizados, ou você ez a alteração sem estar com o watch rodando, aquele que compila seus arquivos em tempo real.

Oi Flavio, fiz novamente os testes e...... sem erros!!

Continua sem gerar erros, nem no console, nem no Chrome.... Para elminar as duvidas, exclui o diretorio js/app e deixei gerar novamente executando o npm run watch

Zipei o projeto e compartilhei para você dar uma olhada se possível. Agora fiquei realmente curioso!

https://drive.google.com/file/d/0B6LQJ-BCcjFLWmpPdzlpRkRoUGs/view?usp=sharing

Até mais

Ah sim... estou com o Node v6.11.0 e NPM v3.10.10

Até

Olharei em breve, mas definitivamente não há como funcionar sem esse módulo. A própria documentação do system e do babel deixam isso claro.

Qual é seu sistema operacional?

"Infelizmente", estou usando Windows 10..... rs Estou sem meu computador pessoal..... :(

Vou testar amanhã no Windows 10 para ver o que acontece. No meu MAC, precisa do transform, mas vamos ver no Windows. Eu já vi de tudo né, vai que...

Concordo contigo..... principalmente quando envolve alguma coisa da Microsoft que adora fugir dos padrões.... Estou viajando e sem outro ambiente pra validar isso... Mas aguardo, obrigado Flavio!

Hoje descubro isso. Aguarde msg em breve!

solução!

Descobri. Vamos lá a mega charada!

O System.js tenta(ele pode falhar!) detectar qual sistema de módulos esta sendo usado e faz os ajustes necessário no seu browsers (eu não sabia disso, fiquei sabendo disso agora!).

Quando você o preset:

{
    "presets" : ["es2015"]
}

Há uma transformação padrão realizada por ele que eu também não sabia que ele fazia (ele faz coisa demais, por final).

Ele gera seus módulos no formato

Object.defineProperty(exports, "__esModule", {
    value: true
});

Como o arquivo transcompilado segue o padrão __esModule, o System.js versão dev consegue interpretá-lo e carregá-lo no navegador perfeitamente.

Esta é a razão do seu código ter funcionando. Todavia, segue os seguintes alertas:

a) O System.js tentará inferir e carregar o módulo, mas é um processo que pode falhar.

When the module format is not set, automatic regular-expression-based detection is used. This module format detection is never completely accurate, but caters well for the majority use cases.

b) Transcompilar com você fez é o mais garantido, porque seu System não tentará inferir o sistema de módulos, terá certeza de que ele estará no formato System.register.

Espero ter esclarecido essa questão.

Sucesso e bom estudo Fábio!

Mais esclarecedor, impossível!!!!!!

Muito obrigado pelo empenho e parabéns mais uma vez pela excepcional serie de treinamentos!!

Muito bom mesmo!

A sequencia agora é Vue, Angular 2 e Ionic2!

Até mais