Rollup-plugin-typescript2: Fehler: Unerwartetes Token (Axios-Import)

Erstellt am 19. März 2018  ·  8Kommentare  ·  Quelle: ezolenko/rollup-plugin-typescript2 
[!] Error: Unexpected token
node_modules\axios\package.json (2:9)
1: {
2:   "_from": "axios",
            ^

Gleicher Fehler wie beim Importieren von Axios in ein reines ES6-Projekt und wenn browser = true für rollup-plugin-node-resolve nicht gesetzt ist. Einfacher Testfall: einzelne js-Datei mit

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

Die Verwendung der folgenden rollup.config.js erzeugt den Fehler, aber wenn rollup-plugin-typescript2 ausgeschlossen wird, funktioniert es.

Versionen

  • Knoten: 8.9.4
  • Typoskript: 2.7.2
  • Aufrollen: 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()
    ]
};
picture JWMB

Hilfreichster Kommentar

Wenn Sie sich Ihr Testrepo ansehen, erzeugt das Plugin die gleiche Ausgabe wie tsc. Sie können in der Datei .rpt2_cache/xxx/code/xxx suchen – suchen Sie nach der Eigenschaft code von json darin. Das wird an Rollup übergeben.

Der Hauptunterschied in 2 Ergebnissen besteht darin, dass import axios from 'axios'; – im Fall von einfachen js-Rollups axios/dist/axios.js – einen webpakierten Build macht. Bei Verwendung des Plugins wird axios/lib/axios.js aufgelöst.

Webpacked build ist anscheinend die Browserversion, die von rollup-plugin-node-resolve im Browsermodus auf magische Weise gefunden wird.

Wenn Sie das Typescript-Plugin als letztes in der Kette platzieren, verwendet Rollup node-resolve, um Importe selbst aufzulösen, und alles funktioniert wie erwartet.

Diese Zeile in Ihrem Test-Repo:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());

Dies ist das erste Mal, dass ich sehe, dass die Plugin-Reihenfolge wirklich wichtig ist :). Ich werde Readme aktualisieren.

picture ezolenko am 4. Apr. 2018
👍2

Alle 8 Kommentare

Könnten Sie den hier gemachten Vorschlag ausprobieren: https://github.com/rollup/rollup-plugin-commonjs/issues/28 (mit rollup-plugin-json)

ezolenko picture ezolenko am 20. März 2018

Danke, das scheint zu funktionieren (rollup-plugin-json als Plugin hinzufügen)!

Die Ausgabe unterscheidet sich jedoch stark vom Zusammenrollen der entsprechenden .js-Datei, wobei die iife-Signatur zu . wird

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

Ich hatte erwartet, dass rollup-plugin-typescript2 im Grunde tsc mit meiner tsconfig.config als Pre-Rollup-Schritt ausführt, aber wenn ich das tue (tsc zuerst, dann rollup ohne das Typescript-Plugin) bekomme ich

var SomeName = (function (exports)...

Ich vermisse hier wahrscheinlich einige Konfigurationseinstellungen..?

JWMB picture JWMB am 21. März 2018

Werden diese anderen Parameter überhaupt innerhalb der Funktion verwendet? Ist der Körper in beiden Fällen gleich?

ezolenko picture ezolenko am 21. März 2018

Ja, sie werden gebraucht, und es gibt einen zusätzlichen großen Teil, beginnend mit

 function createCommonjsModule(fn, module) {

in der Mitte des Hauptteils (bei Verwendung des Typoskript-Plugins im Vergleich zur Verwendung von einfachem js als Quelle). Vieles davon scheint mit der Node-Debugging-Funktionalität zu tun zu haben.
Ich habe einen minimalen Testfall Repo setzen hier .

JWMB picture JWMB am 22. März 2018

Wenn Sie sich Ihr Testrepo ansehen, erzeugt das Plugin die gleiche Ausgabe wie tsc. Sie können in der Datei .rpt2_cache/xxx/code/xxx suchen – suchen Sie nach der Eigenschaft code von json darin. Das wird an Rollup übergeben.

Der Hauptunterschied in 2 Ergebnissen besteht darin, dass import axios from 'axios'; – im Fall von einfachen js-Rollups axios/dist/axios.js – einen webpakierten Build macht. Bei Verwendung des Plugins wird axios/lib/axios.js aufgelöst.

Webpacked build ist anscheinend die Browserversion, die von rollup-plugin-node-resolve im Browsermodus auf magische Weise gefunden wird.

Wenn Sie das Typescript-Plugin als letztes in der Kette platzieren, verwendet Rollup node-resolve, um Importe selbst aufzulösen, und alles funktioniert wie erwartet.

Diese Zeile in Ihrem Test-Repo:
tsPluginConf.plugins.splice(tsPluginConf.plugins.length - 1, 0, typescript());

Dies ist das erste Mal, dass ich sehe, dass die Plugin-Reihenfolge wirklich wichtig ist :). Ich werde Readme aktualisieren.

ezolenko picture ezolenko am 4. Apr. 2018
👍2

Sie brauchen jetzt wahrscheinlich auch kein Json-Plugin.

ezolenko picture ezolenko am 4. Apr. 2018

@ezolenko ich war echt platt von der Readme 😬

Es sagt:

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

Ich glaube, ich habe überlegt, wo ich das Typoskript-Plugin platziere, und dann las ich die nächste Zeile und dachte, this plugin bezog sich auf rollup-plugin-node-resolve .

Aber tolle Arbeit! Danke

giannif picture giannif am 15. Jan. 2019

Behoben, danke :)

ezolenko picture ezolenko am 15. Jan. 2019
👍1
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

lijialiang picture lijialiang  ·  4Kommentare
alexsasharegan picture alexsasharegan  ·  14Kommentare
mikob picture mikob  ·  4Kommentare
vwxyutarooo picture vwxyutarooo  ·  15Kommentare
jansiegel picture jansiegel  ·  9Kommentare