Actualmente, los principales navegadores son compatibles en su mayoría con las nuevas características de ES6. Entre ellos, Chrome y Firefox son los más amigables con las nuevas características de ES6, mientras que IE7~11 básicamente no las soporta.

A continuación se muestra el soporte de los principales navegadores y las fechas de inicio:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Enero de 2017 Agosto de 2016 Marzo de 2017 Julio de 2016 Agosto de 2018

Ejemplo

var a = 2; { let a = 3; document.write(a); // 3 } document.write('<br>'); document.write(a); // 2

Pruébalo »

Para obtener más detalles sobre el soporte del navegador, puedes consultar:http://kangax.github.io/compat-table/es6/

Node.js es JavaScript que se ejecuta en el servidor, y tiene un mayor soporte para ES6. Si aún no conoces Node.js, puedes leer nuestroTutorial de Node.js。

Para la instalación de Node.js, puedes consultarInstalación y configuración de Node.js。

Ejecutar ES6 en el entorno Node.js

$ node
> let sitename="ejemplo"
undefined
> console.log(sitename)
ejemplo
undefined
>

Usa el siguiente comando para ver las características de ES6 que Node ya ha implementado.

node --v8-options | grep harmony

webpack

webpack es un empaquetador de módulos estáticos (module bundler) para aplicaciones modernas de JavaScript. Cuando webpack procesa una aplicación, construye recursivamente un gráfico de dependencias (dependency graph) que contiene cada módulo que la aplicación necesita, y luego empaqueta todos esos módulos en uno o más bundles.

webpack tiene principalmente cuatro conceptos centrales:

  • Entrada (entry)
  • Salida (output)
  • loader
  • Complementos (plugins)

Entrada (entry)

La entrada (entry) indica a webpack qué módulo debe usar como inicio para construir su gráfico de dependencias interno. Una vez que se ingresa al punto de entrada, webpack averigua qué módulos y bibliotecas son dependientes (directa e indirectamente) del punto de entrada. En webpack hay varias formas de definir la entrada, como en los siguientes ejemplos:

Sintaxis de entrada única (abreviada):

const config = {
  entry: "./src/main.js"
}

Sintaxis de objeto:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

Salida (output):

La propiedad output le dice a webpack dónde emitir los bundles que crea y cómo nombrar esos archivos; el valor predeterminado es ./dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

Los loaders le permiten a webpack procesar archivos que no son JavaScript (webpack solo entiende JavaScript por sí mismo). Los loaders pueden convertir todos los tipos de archivos en módulos que webpack puede procesar de manera eficiente. Por ejemplo, si se usa ES6 durante el desarrollo, mediante loaders se convierte la sintaxis de ES6 a ES5, como en la siguiente configuración:

const config = { entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: [ presets: ["env"] ] } ] } }

Complementos (plugins)

Los loaders se utilizan para transformar ciertos tipos de módulos, mientras que los plugins pueden hacer muchas más cosas, como optimización del empaquetado, compresión, definición de variables de entorno, etc. Los plugins son poderosos y son herramientas muy importantes para la extensión de webpack, ya que pueden usarse para manejar una variedad de tareas. Usar un plugin también es muy fácil: solo hay que hacer require() y luego agregarlo al array de plugins.

//Instalar mediante npm const HtmlWebpackPlugin = require('html-webpack-plugin'); //Para acceder a los plugins integrados const webpack = require('webpack'); const config = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };

Construir aplicaciones con webpack

webpack.config.js

const path = require('path'); module.exports = { mode: "development", // "production" | "development" //Selecciona 'development' para el modo de desarrollo y 'production' para el modo de producción entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: [ presets: ["env"] ] } ] }, plugins: [ ... ] }

El ejemplo anterior construye una configuración muy simple. webpack comienza la construcción desde el archivo de entrada main.js, realiza la transformación de JS mediante loaders y genera un archivo llamado bundle.js, con lo cual todo el proceso está completo.

gulp

gulp es una herramienta de construcción automatizada basada en flujos (streams), que se caracteriza por ser fácil de usar, de construcción rápida, con plugins de alta calidad y fácil de aprender; se usa comúnmente en proyectos ligeros.

¿Cómo usarlo?

Instalar gulp globalmente:

$ npm install --global gulp

Agregar la dependencia en el proyecto:

$ npm install --save-dev gulp

Crea un archivo llamado gulpfile.js en el directorio raíz del proyecto:

const gulp = require('gulp');

// default 表示一个任务名，为默认执行任务
gulp.task('default', function() {
  // 放置默认的任务代码
})

Ejecutar gulp:

$ gulp

Construir aplicaciones con gulp

const gulp = require('gulp'); const uglify = require("gulp-uglify"); gulp.task('default', function() { gulp.src('./src/main.js') .pipe(uglify()) .pipe(gulp.dest('./dist')); })

Artículos de referencia