Interprétation détaillée de la configuration liée au webpack babel (tutoriel détaillé)

Cet article présente principalement la configuration détaillée de webpack babel. Je vais maintenant le partager avec vous et vous donner une référence.

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

3. 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 encombrant après la simplification officielle.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Réponses détaillées à la construction de l'environnement Webpack+Babel+React (tutoriel détaillé)

Introduction détaillée à scss dans webpack Configuration

Développement de composants de projet dans Vue (tutoriel détaillé)

Comment implémenter la configuration du packaging de fichiers multi-entrées Webpack

Comment implémenter l'héritage multiple en JavaScript

À propos de la façon dont le service client en ligne de Wangwang implémente

Comment implémenter les effets de la souris Web (détails du tutoriel)

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!