Detaillierte Konfiguration von Webpack Babel

Dieser Artikel stellt hauptsächlich die detaillierte Konfiguration von Webpack Babel vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und es als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Was ist Babel

Babel ist eine Plattform zum Kompilieren von JavaScript. Seine Leistungsfähigkeit kann durch Kompilierung erreicht werden:

1. Verwendung die nächste Generation von Javascript-Code (ES6, ES7,...), auch wenn der aktuelle Browser ihn nicht vollständig unterstützt.

2. Verwenden Sie auf Javascript basierende Erweiterungssprachen, z React JSX; 🎜>Über die Verwendung von babel

Zuallererst kann babel-preset-env verwendet werden, um es zu ersetzen praktischer als ersteres, daher werde ich hier nicht auf Details eingehen.

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

Zuallererst ist babel-polyfill eine globale Einstellung für alle APIs. Und es wird globale Variablen verschmutzen.

babel-runtime benötigt die API, die Sie benötigen, wie zum Beispiel: Object.assign(). Wird zuerst require()

1. babel-plugin-transform-runtime wird am meisten empfohlen. Es erfordert kein require() und verursacht keine globale Umweltverschmutzung. Darüber hinaus wird es bei Bedarf verpackt und ist vollautomatisch.

2. Start

Welche Grammatiken können durch Voreinstellungen gelöst werden? Welche Syntax kann package

babel-plugin-transform-runtime lösen? Paket

Andere. Mehr

/**** 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"]
}

Abschließend: Babel scheint viel Konfiguration zu erfordern, aber tatsächlich ist es nach der offiziellen Vereinfachung gar nicht so kompliziert.

Verwandte Empfehlungen:

Tutorial zum Einrichten von Webpack-, Babel- und React-Entwicklungsumgebungen

Verwenden Sie babel, um es6 zu konvertieren Syntax zu es5 Der einfache Weg

Wissen über Webpack, Babel und React

Das obige ist der detaillierte Inhalt vonDetaillierte Konfiguration von Webpack Babel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!