Construcción del entorno de desarrollo práctico ES6

No presentaré ES6, solo comenzaré a construir el entorno ~

Yo uso webstorm

1. Cree un proyecto ES6Demo en blanco y las siguientes carpetas

src: La carpeta donde se escribe el código ES6 y los programas js escritos se colocan aquí.

dist: La carpeta del código ES5 compilado por Babel, el archivo js aquí cuando la página HTML necesita ser importada.

2.index.html (tenga en cuenta la introducción de js en ./dist)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./dist/index.js"></script>
</head>
<body>
  hello es6
</body>
</html>

3.index.js en src

/**
 * Created by barry on 2019-2-19.
 */
let a = 1;
console.log(a);

4. Inicializa el proyecto

Ingrese npm init -y en la consola y presione Enter para generar el archivo package.json de la siguiente manera

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

5. Instale bable.cli globalmente. Si es lento, puede usar cnpm. No hablaré de eso aquí.

npm install -g babel-cli

6. Instale babel-preset-es2015 y babel-cli localmente

npm install --save-dev babel-preset-es2015 babel-cli

En este momento, package.json ha cambiado, compáralo tú mismo

{
  "name": "ES6Demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

Al mismo tiempo, hay un archivo package-lock.json adicional

7. Cree un nuevo archivo .babelrc en el proyecto.

Agregue el código de la siguiente manera:

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

8. En este momento, puede comenzar a compilar el código es6 en el código es5, ingrese la ventana de comandos

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

Luego puede ver que hay más index.js en la carpeta dist de la siguiente manera:

"use strict";

/**
 * Created by barry on 2019-2-19.
 */
var a = 1;
console.log(a);

Use un navegador para abrir index.html, la salida de la consola 1, OK ~

Construcción del entorno de desarrollo práctico ES6

Supongo que te gusta