Moment For Technology

Webpack compiles package JS/TS

Posted on Aug. 6, 2022, 12:05 p.m. by Mrs. Amy Ford
Category: The front end Tag: webpack

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
Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.