Recently, I was working on a requirement, and I suddenly wanted to add the support of Babel. Babel is a transcoder, which converts high version OF JS code into low version OF JS code to be compatible with low version of browser. This article is an introduction, and I will record the process from 0 to 1, so as to facilitate subsequent review

Build webpack

1. Generate package. Json

yarn init -y // or npm init -y
Copy the code

2. Install dependencies, the latest 4.x Webpack

yarn add webpack webpack-cli -D
Copy the code

3. Create a folder SRC, create index.js in it, and add es6 syntax

const a = 123
Array.from([1.2.3])
Copy the code

4. Create a webpack.config.js configuration file. This is the webPack configuration file

const path = require('path')
module.exports = {
  entry: ['./src/index.js']./ / the entry
  output: {
    path: path.resolve(__dirname, 'dist'), // Output directory
    filename: 'bundle.js'  // Output the name of the file}}Copy the code

5. Add the “scripts” field to package.json — Mode production is compressed and not easy to read — Mode development is uncompressed and easy to read and suitable for development

{
  "scripts": {
    "build": "webpack --mode production"."dev": "webpack --mode development"}}Copy the code

6. Performyarn run build

But now the code packaged is not transcoded, here is how to combine the Babel transcoding;

In combination with Babel

1. Install the Babel dependency

yarn add babel-loader @babel/core @babel/preset-env -D
Copy the code

Babel-loader is the Babel plug-in of WebPack. @Babel /core is the base package of Babel, and the plug-in that depends on @babel/preset-env JS syntax transcoding is mandatory

2. Add a. Babelrc file to the current directory

{
  "presets": [["@babel/preset-env"]]}Copy the code

3. Add the rule to the previous webpack.config.js and usebabel-loader

{
  module.exports = {
  entry: ['./src/index.js'].output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.m? js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'}}}}]Copy the code

4. Runyarn run build

From (Array. From);

This is because@babel/preset-envBy default, only the new JavaScript syntax is converted, not the new API. Array.from belongs to the new API, and additional dependencies need to be added to convert

5. The following two dependency methods are adopted@babel/polyfill 和 @babel/runtimeDescribe each, choose one

5.1 Installing Dependencies (First Method)

yarn add @babel/polyfill -D
Copy the code

And then in the.babelrc file

/ /. Babelrc file
{
  "presets": [["@babel/preset-env",
      {
        "targets": {
          "chrome": "39" // Configure it yourself
        },
        "useBuiltIns": "usage".// Load the polyfill values on demand and the "entry" : introduce all polyfills
        "corejs": 2   // Corejs version @babel/ Polyfill has a 2.x version built in}}]]Copy the code

runyarn run buildYou can see that the packaging is complete

5.2 Installing Dependencies (Second Method)

 yarn add @babel/plugin-transform-runtime @babel/runtime-corejs3 -D
Copy the code

And then in the.babelrc file

{
  "presets": [["@babel/preset-env"]],"plugins": [["@babel/plugin-transform-runtime",
      {
        "corejs": 3   // Specify runtime- Corejs version, currently has two versions, I installed 3}}]]Copy the code

runyarn run buildYou can see that the packaging is complete

The difference between @babel/polyfill and @babel/ plugin-transform-Runtime:

  1. @babel/polyfill will pollute the global scope and modify the built-in Object prototype methods, such as array. from, object. assign, etc. @babel/polyfill needs to enable on-demand loading, otherwise the package will become too bulky.
  2. @babel/plugin-transform-runtime does not pollute global variables, but cannot transcode instance methods such as [].includes, ‘123’. Repeat
  3. @babel/ Polyfill is generally for business development, and @Babel/plugin-transform-Runtime is for library/tool development

The above is a simple personal practice, if you have questions, please leave a comment.