Detaillierte Interpretation der Webpack-Babel-bezogenen Konfiguration (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die detaillierte Konfiguration von Webpack Babel vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

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

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

3. Welche Grammatiken können durch Voreinstellungen gelöst werden? Welche Syntax kann package
   babel-plugin-transform-runtime lösen? Paket

Andere. Mehr

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Antworten auf den Aufbau einer Webpack+Babel+React-Umgebung (ausführliches Tutorial)

Detaillierte Einführung in scss in Webpack Konfiguration

Projektkomponentenentwicklung in Vue (ausführliches Tutorial)

So implementieren Sie die Webpack-Konfiguration für die Dateipaketierung mit mehreren Einträgen

So implementieren Sie Mehrfachvererbung in JavaScript

Informationen zur Implementierung des Online-Kundendienstes von Wangwang

Wie implementiert man Web-Maus-Effekte? (Details zum Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation der Webpack-Babel-bezogenen Konfiguration (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!