web-dev-qa-db-fra.com

Comment utiliser l'option `` useBuiltIns: 'utilisation' 'de babel sur le bundle des fournisseurs?

Étant donné que je dois également prendre en charge IE11, je dois également transpiler node_modules.

Voici la configuration babel que j'utilise sur les node_modules:

presets: [
  ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],

J'utilise les options useBuiltIns car cela donnait une erreur Symbol is not defined, le polyfill était nécessaire.

Cependant, cette configuration se casse au moment de la compilation, soi-disant parce qu'elle injecte un peu de imports dans le code, voici l'erreur:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Fondamentalement, il n'aime pas le module.exports. Alors, comment puis-je utiliser useBuiltIns dans le pack des fournisseurs?

Pour l'instant, j'ai résolu en exigeant toujours le polyfill babel dans le index.html, mais ce n'est pas idéal.

internet-explorerbabeljspolyfillsbabel-polyfill
15
Pontiacks

Babel suppose par défaut que les fichiers qu'il traite sont des modules ES (en utilisant import et export). Si vous exécutez Babel sur des choses dans node_modules (qui sont probablement des modules CommonJS), vous devrez soit dire à Babel de traiter tous les node_modules en tant que scripts, ou demandez à Babel de deviner le type en fonction de la présence de import et export. Deviner est plus simple, vous pouvez donc ajouter

sourceType: "unambiguous"

et aussi dire à Babel de ne pas exécuter la transformation usage sur core-js lui-même avec

  ignore: [
    /\/core-js/,
  ],

car sinon la transformation usage insérera en fait des références à core-js into lui-même provoquant des cycles de dépendance.

Donc, dans votre configuration Babel de niveau supérieur, vous feriez par exemple.

{
  ignore: [
    /\/core-js/,
  ],
  sourceType: "unambiguous",
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
}

Si vous vouliez être plus précis à ce sujet, vous pouvez également le faire

{
  ignore: [
    /\/core-js/,
  ],
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
  overrides: [{
    test: "./node_modules",
    sourceType: "unambiguous",
  }],
}

pour définir uniquement le drapeau des fichiers à l'intérieur de node_modules, mais il n'y a probablement pas grand-chose à y gagner.

Quant à pourquoi cela corrige cette erreur, le problème est que, si Babel pense que quelque chose est un module ES, il insérera des instructions import. Si vous insérez des instructions import dans un fichier qui utilise également des éléments CommonJS tels que module.exports, cela signifie que le fichier utilise désormais les deux systèmes de modules dans le même fichier, ce qui est un gros problème et provoque les erreurs que vous voyez.

3
loganfsmyth