web-dev-qa-db-fra.com

babel 7 ne compile pas la classe ES6 qui, dans node_modules

J'ai une erreur dans IE11 SCRIPT1002: erreur de syntaxe (problème avec la syntaxe de classe). Mon code simple avec 2 lignes:

import { struct } from 'superstruct';
console.log('finished');

Je ne veux pas que ma classe de compilation babel7 en code ES5

J'ai essayé d'écrire un fichier .babelrc:

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

et https://babeljs.io/docs/en/babel-plugin-transform-classes n'ont pas encore été corrigés

Mise à jour: j'ai essayé d'utiliser @ babel/plugin-preset-es2015 qui convertit la classe en code ES5 mais ce paquet est déconseillé dans babel7

Aidez-moi s'il vous plaît

javascriptnode.jsecmascript-6babel
8
zloctb

Afin de transformer node_modules et les packages enfants dans Babel 7, vous devez utiliser un babel.config.js fichier au lieu d'un .babelrc fichier.

Voir ceci commentaire de problème et la documentation babel sur configuration à l'échelle du projet . Plus précisément

Nouveau dans Babel 7.x, Babel a comme concept de répertoire "racine", qui est par défaut le répertoire de travail actuel. Pour une configuration à l'échelle du projet, Babel recherchera automatiquement un "babel.config.js" dans ce répertoire racine.

...

Étant donné que les fichiers de configuration à l'échelle du projet sont séparés de l'emplacement physique du fichier de configuration, ils peuvent être idéaux pour une configuration qui doit s'appliquer à grande échelle, même en permettant aux plugins et aux préréglages de s'appliquer facilement aux fichiers dans node_modules ou dans des packages à liens symboliques, ce qui était traditionnellement assez pénible. configurer dans Babel 6.x.

Le court est que .babelrc est utilisé pour les transformations d'un fichier de projet local (non compris node_modules) tandis que babel.config.js doit être considéré à l'échelle du projet et s'appliquera aux dépendances des packages lors du regroupement (node_modules). C'est un peu déroutant mais j'espère que ça aide!

Éditer

Voici un peu plus d'informations sur une configuration de projet complète pour construire votre fichier d'exemple à l'aide de webpack. Notez que si vous utilisez .babelrc au lieu de babel.config.js ici cela ne fonctionnera pas. Exécution webpack-cli produit un script script.out.js qui n'utilise pas le mot clé class.

import { struct } from 'superstruct';
console.log('finished');

module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                    "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
};

module.exports = {
    entry: './script.js',
    output: {
        path: __dirname,
        filename: 'script.out.js',
    },
    module: {
        rules: [ {
            test: /\.m?js$/,
            use: {
                loader: 'babel-loader'
            }
        } ]
    }
}

"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"superstruct": "^0.6.0",
"webpack-cli": "^3.2.3"
14
Garrett Johnson