Rollup-plugin-typescript2: Erro: token inesperado (importação de axios)

Criado em 19 mar. 2018 · 8Comentários · Fonte: ezolenko/rollup-plugin-typescript2

[!] Error: Unexpected token
node_modules\axios\package.json (2:9)
1: {
2:   "_from": "axios",
            ^

Mesmo erro ao importar axios para um projeto ES6 puro e não ter definido browser = true para rollup-plugin-node-resolve. Caso de teste simples: único arquivo js contendo

import axios from "axios";
window.process = window.process || { env: {} };
axios.get("http://httpbin.org/").then(response => console.log("Got length: " + response.data.length));

Usar o rollup.config.js abaixo produz o erro, mas ao excluir rollup-plugin-typescript2, ele funciona.

Versões

nó: 8.9.4
datilografado: 2.7.2
acúmulo: 0.57.1
rollup-plugin-typescript2: 0.12.0

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: 'src/main.js',
    output: {
        file: 'public/bundle.js',
        format: 'iife',
        sourcemap: true
    },
    plugins: [
        typescript(),
        resolve({ browser: true }),
        commonjs()
    ]
};

Fonte

JWMB

Comentários muito úteis

Olhando para o seu repositório de teste, o plug-in produz a mesma saída que o tsc. Você pode verificar no arquivo .rpt2_cache/xxx/code/xxx - procure code propriedade de json dentro. Isso é o que é passado para o rollup.

A principal diferença em 2 resultados é quando import axios from 'axios'; faz - nos casos de rollup de js simples pega axios/dist/axios.js - compilação webpaked. No caso de usar o plugin axios/lib/axios.js está resolvido.

A construção Webpacked é aparentemente a versão do navegador que é encontrada magicamente por rollup-plugin-node-resolve no modo de navegador.

Se você colocar o plug-in de texto digitado por último na cadeia, o rollup usa o node-resolve para resolver as importações por si só, e tudo está funcionando conforme o esperado.

Esta linha em seu repositório de teste:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());

Esta é a primeira vez que vejo que a ordem do plugin é realmente importante :). Vou atualizar o readme.

ezolenko em 4 abr. 2018

👍2

Todos 8 comentários

Você poderia tentar a sugestão feita aqui: https://github.com/rollup/rollup-plugin-commonjs/issues/28 (usando rollup-plugin-json)

ezolenko em 20 mar. 2018

Obrigado, isso parece funcionar (adicionando rollup-plugin-json como um plugin)!

A saída é muito diferente de enrolar o arquivo .js correspondente, porém, com a assinatura iife se tornando

var SomeName = (function (exports,tty,util,url,http,https,assert,stream,zlib)...

Eu esperava que rollup-plugin-typescript2 basicamente executasse tsc com meu tsconfig.config como uma etapa de pré-rollup, mas quando faço isso (primeiro tsc, depois rollup sem o plug-in typescript), recebo

var SomeName = (function (exports)...

Provavelmente estou faltando alguma definição de configuração aqui ..?

JWMB em 21 mar. 2018

Esses outros parâmetros são usados dentro da função? O corpo é o mesmo em ambos os casos?

ezolenko em 21 mar. 2018

Sim, eles são usados e há um grande pedaço adicional, começando com

 function createCommonjsModule(fn, module) {

no meio do corpo (ao usar o plug-in de texto digitado em comparação com o uso de js simples como fonte). Muito disso parece relacionado à funcionalidade de depuração do Node.
Eu coloquei um repositório mínimo de casos de teste aqui .

JWMB em 22 mar. 2018

A construção Webpacked é aparentemente a versão do navegador que é encontrada magicamente por rollup-plugin-node-resolve no modo de navegador.

Se você colocar o plug-in de texto digitado por último na cadeia, o rollup usa o node-resolve para resolver as importações por si só, e tudo está funcionando conforme o esperado.

Esta linha em seu repositório de teste:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());

Esta é a primeira vez que vejo que a ordem do plugin é realmente importante :). Vou atualizar o readme.

ezolenko em 4 abr. 2018

👍2

Você provavelmente também não precisa do plugin json agora.

ezolenko em 4 abr. 2018

@ezolenko, fiquei realmente chocado com o readme 😬

Diz:

Must be before this plugin in the plugin list, especially when browser: true option is used, see #66

Acho que estava pensando onde coloco o plugin de texto digitado, e então li a próxima linha e pensei que this plugin estava se referindo a rollup-plugin-node-resolve .

Ótimo trabalho! Obrigado