web-dev-qa-db-fra.com

Pourquoi est-ce que je reçois une "importation de jetons inattendue" sur un projet Webpack mais pas sur l'autre?

J'ai 2 projets qui fonctionnent différemment et je ne peux pas dire ce qui est différent. J'ai le suivant sur un projet ...

// In .ts wile
import 'core-js/es6';
import 'reflect-metadata';

Cela fonctionne très bien sur un projet, cependant, un autre projet avec les mêmes tsconfig.json et typings.json ainsi que le ts-loader configuré dans la configuration de webpack que je reçois ...

Uncaught SyntaxError: Importation de jeton inattendue

Le JS transpilé sur celui qui échoue ressemble à ceci ...

/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(process) {import 'core-js/es6';
    import 'reflect-metadata';

Je posterai le projet suivant dans un instant

Donc ma question est ce qui me manque? Les définitions TypeScript ne sont-elles pas importées correctement? J'ai déjà essayé de courir typings install encore une fois pour écarter cela.

Plus d'infos

//tsconfig
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

// Typings.json
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}
typescriptwebpack
27
Jackie

J'avais un problème similaire dans lequel j'utilisais async\wait et Promises (les deux constructions ES6) à l'aide du mot-clé import dans les fichiers source ts pour importer d'autres modules ts.

Je pouvais transpiler avec TypeScript en utilisant la version par défaut de la cible js (ES5), qui génère des erreurs de transpile en se plaignant des mots-clés async\\ wait et Promise mais depuis que je suis en train de faire tourner Node 6.4.0. Tout fonctionne au moment de l'exécution.

Dans le cas décrit ci-dessus, le mot clé "Importer" a été traduit de ts en js comme suit:

var BasePage_1 = require('./BasePage');

Donc, je reçois des erreurs tsc transpile mais Node fonctionne bien au moment de l'exécution avec la traduction 'Import' ci-dessus.

Si j'utilise le commutateur -t pour dire à tsc de transpiler sur ES6, alors transpile est propre, sans erreur, mais Node échoue car il ne comprend pas le mot clé 'Import' du mot fichier js émis.

Maintenant, tsc émet la traduction suivante pour 'Importer':

importer {BasePage} depuis './BasePage';

Donc, la traduction ci-dessus n’est pas vraiment une traduction et Node étouffe le fichier js avec le mot-clé 'Importer' au moment de l’exécution.

Sommaire:

J'ai résolu ce problème en utilisant cette ligne de commande pour indiquer à tsc d'utiliser les bibliothèques ES6, mais pour émettre la syntaxe d'importation du module appropriée:

myTypeScriptSourceFile.ts -t ES6 -m commonjs

Maintenant, je reçois un transpile propre et aucune erreur d'exécution de Node. Parce que maintenant 'Import' est correctement traduit en utilisant le 'require' mot reservé.

Plus de détails ici: https://www.typescriptlang.org/docs/handbook/compiler-options.htmlhttps://www.typescriptlang.org/docs/handbook/module- résolution.html

31
Vance McCorkle

addendum à la réponse acceptée pour le programmeur occupé, l'option de ligne de commande peut également être faite à l'intérieur de tsconfig.json fichier:

{
  "compilerOptions": {
    // ...other options
    "module": "commonjs", // add this
    "target": "es6", // and this
 }
16
Cezar Augusto