Dealing with advanced syntax

es6

The plug-in
  • Babel – loader:

Translate ES6 to ES5 using Babel and Webpack

  • @babel/core

Babel core module, call transform transform method to achieve transformation

  • @babel/preset-env

Conversion target module (i.e. ES5 module)

Installing a plug-in
$ yarn add babel-loader @babel/core @babel/preset-env -D
Copy the code
Webpack configuration

Module. rules Adds the babel-loader configuration

module: {
    rules: [
      {
        test: /\.js$/i,
        use: {
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env', 
                {
                    "targets": {
                      "browsers": "last 2 versions"
                    },
                    "loose": true,
                    "modules": "commonjs",
                    "useBuiltIns": false
                }
              ],
              plugins: []
            },
          },
        },
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components)/,
      }
    ],
  }
Copy the code

Then yarn Build is packaged, and you’ll see that the ES6 syntax in your project has been converted to ES5 syntax

ES7 decorator & Class syntax parsing

The plug-in
  • @babel/plugin-proposal-decorators
  • @babel/plugin-proposal-class-properties
Installing a plug-in
$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D
Copy the code
Webpack configuration

Add plugins to plugins:

module: {
    rules: [
      {
        test: /\.js$/i,
        use: {
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
              ]
            },
          },
        },
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components)/,
      }
    ],
  }
Copy the code

You can also configure the Babel configuration separately into the. Babelrc file:

{
  "presets": [
    "@babel/preset-env",
    {
        "targets": {
            "browsers": "last 2 versions"
        },
        "loose": true,
        "modules": "commonjs",
        "useBuiltIns": false
    }
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}
Copy the code
@babel/plugin-transform-runtime

Babel needs polyfill parsing to handle higher-order grammars such as includes, from, and so on

Why use @babel/ plugin-transform-Runtime

  1. @babel/preset-env If useBuiltIns: “Entry” is set, polyfill needs to be introduced manually. If useBuiltIns: “Usage” is set, polyfill is introduced as a global object, which is easy to pollute global variables. @babel/ plugin-transform-Runtime can introduce polyfill on demand.
  2. Babel uses a lot of auxiliary code when compiling JS. Such auxiliary code as _extend, @babel/plugin-transform-runtime can be removed to reduce the file size

@ Babel/plugin – transform – the runtime configuration:

//.babelrc
{
  "presets": [
    "@babel/preset-env",
    {
        "targets": {
            "browsers": "last 2 versions"
        },
        "loose": true,
        "modules": "commonjs",
        "useBuiltIns": false
    }
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true
      }
    ]
  ]
}
Copy the code

Compile the React

Install Babel React parsing

$ yarn add @babel/preset-react
Copy the code

Add react configuration to Babel configuration

//.babelrc
{
  "presets": [
    [
        "@babel/preset-env",
        {
            "targets": {
                "browsers": "last 2 versions"
            },
            "loose": true,
            "modules": "commonjs",
            "useBuiltIns": false
        }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true
      }
    ]
  ]
}
Copy the code

Compile the TypeScript

Install Babel typescript parsing

$ yarn add @babel/preset-typescript -D
Copy the code

Then add the typescript parsing configuration to Babel

//.babelrc
{
  "presets": [
    [
        "@babel/preset-env",
        {
            "targets": {
                "browsers": "last 2 versions"
            },
            "loose": true,
            "modules": "commonjs",
            "useBuiltIns": false
        }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true
      }
    ]
  ]
}
Copy the code

Versions of babel7 and below can choose the typescript+ TS-loader /awesome-typescript-loader scheme

Handling global variables

expose-loader

Allows exposing a module (whole or part) to global objects (self, Window, and global)

$ yarn add expose-loader -D
Copy the code

Jquery is used inline as an example:

import $ from "expose-loader? exposes=$,jQuery! jquery"; // Add 'jquery' to the global object named '$' and' jquery ', separated by ', '// Now you can use window.$and window.jqueryCopy the code

You can also write to a Webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      {
        test: require.resolve("underscore"),
        loader: "expose-loader",
        options: {
          exposes: [
            "_.map|map",
            {
              globalName: "_.reduce",
              moduleLocalName: "reduce",
            },
            {
              globalName: ["_", "filter"],
              moduleLocalName: "filter",
            },
          ],
        },
      },
    ],
  },
};
Copy the code

webpack.ProvidePlugin

To automatically inject content into each module, let’s use jquery as an example:

const webpack = require('webpack')
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery'
    })
  ]
}
Copy the code

When webPack is packaged, it will inject “$” into each module as jquery alias

Webpack does not package third-party CDN import modules

Sometimes third-party CDN packages introduced in HTML via script that do not want to be packaged by Webpack can be implemented by configuring externals (to exclude dependencies from the output bundle)

/ / index. The HTML < script SRC = "https://code.jquery.com/jquery-3.1.0.js" > < / script > / / webpack config. Js module. Exports = { / /... externals: { jquery: 'jQuery', }, }; Import $from 'jquery'; $('.my-element').animate(/* ... * /);Copy the code