I’ve been waiting all my life, just don’t know who I’m waiting for — the terminal of happiness

As a programmer, the object is always new! 😂 😂 😂

const GF = new Object(a); GF.happy(console.log("see a film with you On this Chinese Valentine's Day"));
Copy the code

preface

Once upon a time, Compile once, Run everywhere Java charm is infinite, attracting a lot of people with lofty ideals into its. At the time, javascript was still fighting over which specification to follow, and Internet Explorer went from leading the way in javascript to being a no-no. Writing code that had to be compatible with Internet Explorer (not just Internet Explorer, but Internet Explorer) was really frustrating. With the advent of Neo (Node), javascript has grown rapidly since then, rivaling Java as the world’s best language. Many aspiring people have been working day and night to write once,run everywhere, and finally come up with a solution called Babel. Front end engineers are running around telling each other, and more and more front end engineers are shaking hands with product managers. Since then, javascript has emerged as the king of the high-level language competition.

😉😉😉, think of three months ago I made up my mind to stack. Along the way, I have been so impressed by the charm of javascript that I even want to give up the idea of Java. (I’m just afraid that in the future, only light (burn) head (night) can become stronger.)

package.json

When I first came into contact with javascript, I was very resistant to the idea that my beloved Java had Maven as dependency management. I also introduced javascript files into HTML, and had to download the corresponding version of the class library from the dependency library before introducing it. When I learned about package.json,Neo (Node) is definitely a savior.

{
   "name": "fly-babel"."version": "1.0.0"."main": "index.js"."license": "MIT"."private": true."scripts": {
       "babel": "./node_modules/.bin/babel src --out-dir lib"
   },
   "dependencies": {
       "@babel/runtime": "^ 7.5.5." "."core-js": "3"
   },
   "devDependencies": {
       "@babel/cli": "^ 7.5.5." "."@babel/core": "^ 7.5.5." "."@babel/plugin-transform-runtime": "^ 7.5.5." "."@babel/preset-env": "^ 7.5.5." "}}Copy the code

Run YARN Babel to compile and output the code below SRC to lib

Scripts are primarily used to run scripts. Such as YARN Babel, YARN Run Babel, or NPM run Babel

Dependencies refer to the library of dependencies that you need to add to your project

DevDependencies are development environment dependencies, and the final package is not included in the project

yarn

Yarn Chinese document

Npm is a more intelligent and powerful dependency package manager, with people are good, who use who know

Yarn Initializes the project

yarn init
Copy the code

Installing YARN globally

#The Mac is a real development tool
brew install yarn

#Install using NPM
npm install -g yarn
Copy the code

Verify that YARN is successfully installed

yarn --version
Copy the code

Configuring Taobao Mirror

yarn config set registry http://registry.npm.taobao.org/
Copy the code

Installation project dependencies

yarn install
Copy the code

Adding project dependencies

#Add the latest version of Lodash to the production dependency
yarn add [package]
#Add the specified version
yarn add [package]@[version]
yarn add lodash
Copy the code

Add development environment dependencies

yarn add --dev [package]
#Add LoDash to development dependencies
yarn add --dev lodash
Copy the code

Upgrade project dependencies

#Graphical interface
yarn upgrade-interactive --latest

yarn upgrade [package]

#Upgrade to a specified version
yarn upgrade [package]@[version]
Copy the code

Remove reliance on

yarn remove [package]

#Remove lodash
yarn remove lodash
Copy the code

Run the custom commands in package.json

yarn run 
yarn run babel
yarn babel
Copy the code

Babel

Remember to use Babel 7.x

Bablel Chinese official website

Babel online conversion

Promise me, official website data must see oh, after all, is primary data. To get a taste of what the class is compiled into, see Babel 7.

Install dependencies

#Installation development dependency
yarn add --dev @babel/core @babel/cli @babel/preset-env @babel/runtime @babel/plugin-transform-runtime

#Installation project dependencies
yarn add core-js @babel/runtime
Copy the code

Configuration file selection –babel.config.js

Js files can use javascript, high scalability, can use node API.

.babelrc is a JSON format that doesn’t even include a comment. Babelrc, babel.config.js can be used as the global configuration for the entire project.

// babel.config.js configuration file
/** * @author: @description: Babel global configuration * Plugins are compiled by increasing the index of the array from the first to the last; */ presets are compiled in reverse order from the end of the array to the first
module.exports = function (api) {
    api.cache(true);
    const babelrcRoots = [
        // Keep the root as a root
        ".".// Also consider monorepo packages "root" and load their .babelrc files.
        "./packages/*"
    ]
    const presets = [
        [
            "@babel/preset-env",
            {
                // The configuration requires compatible environments
                // chrome, edge, firefox, safari, ie, ios, node,android
                targets: {
                    ie: "8".chrome: "67"."browsers": ["1%" >."last 2 versions"." ie>8"."Android > = 4.0"."ios >= 7"]},// Whether to print the list of enabled plugins
                debug: true.loose: true.// Use es modules, set to" auto", use commonJS,
                modules: false.// The gasket uses core.js
                corejs: 3.// Apply polyfill on demand
                useBuiltIns: "usage",}]];const plugins = [["@babel/plugin-transform-runtime", {
        corejs: 3.absoluteRuntime: false.helpers: true.regenerator: true.// Use es modules helpers
        useESModules: true}]].// Test fetching Node variables
    if (process.env.NODE_ENV === "development") {
        console.log('Development Environment', process.env);
    }
    return {
        presets,
        plugins, babelrcRoots
    };
}
Copy the code

This is the configuration I’m using now, and I’ll supplement it later when I add something new

Presets introduce a common set of plug-ins, and @babel/preset-env contains a common syntax-conversion in ES (@babel/preset-env will preset all ECMAScript 2015+ code by default). Instead of adding them to plugins one by one

Plugins introduce special plugins for gaskets

A profound

  • The source code file
[1.2.3].map((n) = > n + 1);
class FlyYou {
    fly () {
        console.log('m fly you');
    }

    static sleep () {
        console.log('m sleep'); }}console.log(Object.assign({}, { age: 1 }));
const arr = [1.2.3];
console.log('Arr contains 1:', arr.includes(1));
Promise.resolve('demo-1.js-Promise.resolve').then(data= > console.log(data));
Copy the code
  • The code after Babel is escaped
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.promise";
import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";

var _context;

_mapInstanceProperty(_context = [1.2.3]).call(_context, function (n) {
  return n + 1;
});

var FlyYou =
/*#__PURE__*/
function () {
  function FlyYou() {}

  var _proto = FlyYou.prototype;

  _proto.fly = function fly() {
    console.log('m fly you');
  };

  FlyYou.sleep = function sleep() {
    console.log('m sleep');
  };

  returnFlyYou; } ();console.log(_Object$assign({}, {
  age: 1
}));
var arr = [1.2.3];
console.log('Arr contains 1:', _includesInstanceProperty(arr).call(arr, 1));

_Promise.resolve('demo-1.js-Promise.resolve').then(function (data) {
  return console.log(data);
});
Copy the code
  • Escape analysis
import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
_Promise.resolve('demo-1.js-Promise.resolve').then(function (data) {
  return console.log(data);
});
Copy the code

There is no way to run this code in a browser on its own, it needs to be packaged with webpack dependencies. We can see that Promise is replaced by _Promise, and this is called a polyfill, which means introducing a new dependency to check if the runtime has a Promise implementation, and if so, using the native Promise, If not, use a dependency library (@babel/runtime-corejs3/core-js-stable/promise) to implement a promise.

@babel/polyfill is different from @babel/ Runtime

Both provide shims, but @babel/ Polyfill checks to see if the runtime environment implements the API, and if not, directly modifies the prototype or adds objects to the window. @babel/runtime does not pollute global variables, Babel 7.x can be either. @babel/ Runtime is recommended.

For example, if Internet Explorer does not implement a Promise, you can use @babel/ Polyfill to compile the code and access the Promise directly from the browser console. @babel/ Runtime does not pollute global variables and the console cannot access the Promise.