Detailed configuration of webpack babel

This article mainly introduces the detailed configuration of webpack babel. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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.

Related recommendations:

Tutorial on setting up Webpack, Babel, and React development environments

Use babel to convert es6 syntax to es5 The easy way

Knowledge about Webpack, Babel and React

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