Git for a star!My fun front-end notes!! (Webpack, Babel, typescript, hand-torn sorting algorithms are in the works!!)

0, based

Let’s start with what Babel can do:

  • The syntax conversion
  • throughPolyfillAdding missing features to the target environment (@ Babel/polyfill modules)
  • Source code conversion (Codemods)

1, start

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
Copy the code

2. Configuration files

Create the babel.config.json configuration file

/ / sample
{
  "presets": [[/ / the default
      "@babel/env",
      {
        // Target browser version
        // You can also set Browserslist to use the default configuration > 0.5%, last 2 Versions, Firefox ESR, not Dead.
        "targets": {
          "edge": "17"."firefox": "60"."chrome": "67"."safari": "11.1"
        },
        //
        "useBuiltIns": "usage"."corejs": 3}]],// Download the required plug-in and put it in the corresponding place
  "plugins": []}Copy the code

Parameter analysis

  • Preset – the default

    • Env is officially recommended to compile with a list of plugins generated for the target environment you are configuring.

    Syntax conversions only convert a higher version of the syntax to a lower version, but the new built-in functions, instance methods, cannot be converted.

    For example, the arrow function reduce is converted to a lower version, but the promise /async/await and class built-in methods are not, so polyfill is required

  • Polyfill – gasket (conversion built-in function/method) deprecated!!

    • It is no longer on display because it has been abandoned but has a guiding effect

    The reason is too big! It helps with conversion, but every time you need to convert, you have to import all of it (up to 89K!). Introduces unnecessary elements into the global context. Silly not silly? But how to solve the nen? Babel has given the official method. Keep watching!

  • UseBuiltIns – The demo code is located above the parameters in the default

    • Official recommendation usage

    As the name implies, when I need the shim Polyfill to convert the built-in method it will automatically load as needed on demand!

    Importing files individually, where they are needed, ensures that only one file is imported per Bundler. The current mode is similar to @babel/ plugin-transform-Runtime. Polyfill is used locally to create a sandbox environment without causing global pollution. But what about when you have too many components? The same code is packaged repeatedly, so we can look at the entry below

    Note, however, that the corejs parameter problem is resolved below

    • entry

    Import “@babel/polyfill “at the project entrance;

    It looks like a global import, but the difference is that the @babel/preset-env plugin will break @babel/ Polyfill as needed, leaving only those that are required. In fact, only the core-js/ XXX required will be imported at compile time

    • False This parameter is the default

    Don’t fuck with my own plugins

  • Core-js – Core block

    • I wonder what this is? Take a look at the example code above with useBuiltIns!

    When using useBuiltIns:usage, corejs must be set at the same time (warning will be given if not set, default is “corejs”: 2), note: Here you still need to install @babel/polyfill(the current @babel/polyfill version installs “corejs”: 2 by default):

    First of all, the reason for using core-js@3 is that no new features are added to the core-js@2 branch. New features are added to core-js@3. For example, if you’re using array.prototype.flat (), if you’re using core-js@2, it doesn’t include this new feature. In order to use more of the new features, we recommend that you use core-js@3.

  • Plugins to @babel/ plugin-transform-Runtime

    • When you have some browser-independent conversion request?

    Don’t worry about plugins until you find the corresponding plugin on the website.

    1, install,

    2, babel.config.json in the plugins array! easy

    • At this point, I have to mention the * I just mentioned@babel/plugin-transform-runtimePlug-in *

    Even if we have the artifact loading on demand, we will be repeatedly imported when we use the same conversion method or lower version of the class conversion, which will make the code bigger!!

    This is where the @babel/plugin-transform-runtime plugin comes in. With the @babel/ plugin-transform-Runtime plugin, all helpers will reference the @babel/runtime module. This avoids duplicate helpers in compiled code and reduces package size.

    • How do you use it?
    npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
Copy the code

    Plugins will do!

    ## Final ##

    {
  "presets": [["@babel/preset-env"]],"plugins": [["@babel/plugin-transform-runtime",
      {
        "corejs": 3}}]]Copy the code

3. Call compilation (command)

Call the Babel command to compile the files in SRC and place them in lib

/node_modules/.bin/ Babel SRC --out-dir lib or NPX Babel SRC --out-dir libCopy the code

NPX is different from NPM

NPX is a tool, just as NPM has greatly improved the experience of installing and managing package dependencies. Building on NPM, NPX makes command line tools and other executables in NPM packages much easier to use. It greatly simplifies a lot of the steps that we previously needed to use pure NPM.

Main features:

1, temporary installation can execute the dependency package, no global installation, do not worry about long-term pollution.

2, you can execute the command in the dependency package, the installation is completed automatically run.

3, automatically load node_modules dependencies without specifying $PATH. The compile command here uses this feature

4. You can specify the node version and command version, which solves the problem of using different versions of commands for different projects.