Configuration détaillée du webpack babel

Cet article présente principalement la configuration détaillée de webpack babel. L'éditeur pense que c'est plutôt bien. Je vais maintenant le partager avec vous et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Qu'est-ce que Babel

Babel est une plateforme de compilation de JavaScript Sa puissance peut être obtenue grâce à la compilation :

1. Utiliser. la prochaine génération de code javascript (ES6, ES7,...), même si le navigateur actuel ne le supporte pas entièrement

2. Utiliser des langages d'extension basés sur JavvScript, tels que React JSX ; 🎜>À propos de l'utilisation de babel

Tout d'abord, babel-preset-es2015 a été abandonné. Vous pouvez utiliser babel-preset-env pour le remplacer. plus pratique que le premier, je n’entrerai donc pas dans les détails ici.

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

Tout d'abord, babel-polyfill est un paramètre global pour toutes les API. Et cela polluera les variables globales.

babel-runtime a besoin de l'API dont vous avez besoin, telle que : Object.assign(). Will first require()

1. babel-plugin-transform-runtime est le plus recommandé. Il ne nécessite pas require() et ne provoque pas de pollution globale. De plus, il est conditionné à la demande et est entièrement automatique.

2. Démarrer

Quelles grammaires peuvent être résolues par des préréglages. Quelle syntaxe package

babel-plugin-transform-runtime peut-il résoudre ? forfait

Autres. En savoir plus

/**** webpack.config.js ****/
// 在规则中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只处理src目录下面的。
  // 你也可以配置一条规则处理node_modules下面的。
  // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我，导致浏览器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段设定转码规则
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的环境，可选入： chrome, edge, 也可以node:6.5 ，node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin转码预设不起作用的内容如：Object.assign()等等
 "plugins": ["transform-runtime"]
}

Enfin : Babel semble nécessiter beaucoup de configuration, mais en fait ce n'est pas si compliqué après la simplification officielle.

Recommandations associées :

Tutoriel sur la configuration des environnements de développement Webpack, Babel et React

Utiliser Babel pour convertir es6 syntaxe vers es5 en toute simplicité

Connaissance de Webpack, Babel et React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!