Detailed interpretation of webpack babel related configuration (detailed tutorial)

This article mainly introduces the detailed configuration of webpack babel. Now I will share it with you and give you a reference.

What is Babel

Babel is a platform for compiling JavaScript. Its power is that it can help you achieve through compilation:

1. Use the next generation of javascript (ES6, ES7,...) code, even if the current browser does not fully support it;

2. Use extension languages ​​based on JavvScript, such as React JSX;

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

About the use of babel

First of all, babel-preset-es2015 has been abandoned. You can use babel-preset-env to replace it. The latter is better and more convenient than the former, so I won’t go into details here.

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

1. First of all, babel-polyfill is a global setting for all APIs. And it will pollute global variables.

2. babel-runtime requires the API you need, such as: Object.assign(). Will first require()

3. babel-plugin-transform-runtime is the most recommended. It does not require require() and does not pollute the world. What's even more amazing is that it is packaged on demand and is fully automatic.

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

Which grammars can be solved by presets. What syntaxes can be solved by package

babel-plugin-transform-runtime. package

Others. More

Finally: Babel seems to require a lot of configuration, but in fact it is not that complicated after the official simplification.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answers to Webpack Babel React environment construction (detailed tutorial)

Detailed introduction to the relevant configuration of scss in webpack

Project component development in Vue (detailed tutorial)

How to implement webpack multi-entry file packaging configuration

How to implement multiple inheritance in JavaScript

About how Wangwang online customer service implements

How to implement web mouse effects (detailed tutorial)

The above is the detailed content of Detailed interpretation of webpack babel related configuration (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!