ES6 development environment preparation -- babel configuration (1)

Foreword:

　　The company's project is currently developed with vue, and es6 grammar is used in the project, but occasionally some grammars will be confused and forgotten during development, which is recorded here for your own review and reading.

　　1.Babel first acquaintance

　　　　Function : babel is a JavaScript compiler that compiles ES6 syntax into ES5 syntax recognized by browsers.

　　　　Usage :

1>REPL online editing:

　　　　　　　　We can use the online REPL environment provided by babel to complete the conversion of ES6 syntax ( https://babeljs.cn/repl )　

　　　　　　 2>Babel CLI command line:

We install the babel cli tool 　　　　　　　　locally , configure the .babelrc file, and complete the ES6 syntax conversion through commands . Read on for details .

2. Babel practice

　　1> Create a project: a src and dist folder is created in the root directory

　　　　　　src : Stores files written in ES6.

　　　　　　dist : Store ES5 files compiled by babel.

　　　　2> Create files : write index.html and index.js files

　　　　　　index.html file: Note that dist/index.js is introduced

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./dist/index.js"></script>
    <title>babel配置入門</title>
</head>
<body>
    <script>
        printMsg()
    </script>
</body>
</html>

　　　　　　index.js file:

let str = 'ES6 first section on babel configuration' 
let printMsg = () => {console.log(str)}

　　　　3>Initialize the project

　　　　　　The npm init command generates a package.json file in the root directory

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

　　　　4> Install babel-cli, configure the .babelrc file

　　　　　　1. The transcoding rules of es2015 and babel-cli are installed in the project

　　　　　　　　命令：npm install --save-dev babel-preset-es2015 babel-cli

　　　　　　　　Installation result : There are more configuration items in the package.json file.

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }

　　　　　　2. Configure the .babelrc file

　　　　　　　　1> Create a new .babelrc file in the root directory

　　　　　　　　2> Configure transcoding rules presets and plugins

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

　　　　5> ES6 to ES5 operation:

　　　　　　1.Babel command conversion

1> Command line　　　　　　　　input: babel src / index.js - o dist / index.js

　　　　　　　　2>Transcoding result: dist/index.js

　　　　　　2. Simplified conversion: conversion commands can be configured in the package.json file

　　　　　　　　1> Rule configuration

　　　　　　　　2> Execute the command

　　3. babel-cli command supplement

　　　　1. Convert the index.js file and output it in the current named line program window

　　babel src/index.js

　　　　2. Convert src/index.js and output it to dist/index.js file ( use -o or --out-file )

　　babel src/index.js -o dist/index.js

　　babel src/index.js --out-file dist/index.js

　　　　3. Real-time monitoring es6.js recompile as soon as there are changes (use -w or --watch )

　　babel src/index.js -w --out-file dist/index.js

　　babel src/index.js --watch --out-file dist/index.js

　　　　4. Compile the entire src folder and output to the lib folder ( use -d or --out-dir )

　　babel src -d dist

　　babel src --out-dir dist

　　　　5. Compile the entire src folder and output to a file

　　babel src --out-file /dist/index.js

　　　　6. Enter the babel-node command directly, you can run ES6 code directly on the command line

　　babel-node

ES6 development environment preparation -- babel configuration (1)

Guess you like