Actuellement, les principaux navigateurs prennent pratiquement tous en charge les nouvelles fonctionnalités d'ES6. Parmi eux, les navigateurs Chrome et Firefox sont les plus compatibles avec les nouvelles fonctionnalités d'ES6. IE7~11 ne prend pratiquement pas en charge ES6.

Voici l'état de prise en charge et les dates de début des principaux navigateurs :

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
janvier 2017 août 2016 Mars 2017 Juillet 2016 Août 2018

Exemples

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

Essayez-le »

Pour plus de détails sur la prise en charge des navigateurs, vous pouvez consulter :http://kangax.github.io/compat-table/es6/

Node.js est JavaScript côté serveur, et il dispose d'une meilleure prise en charge d'ES6. Si vous ne connaissez pas encore Node.js, vous pouvez lire notreTutoriel Node.js。

Pour l'installation de Node.js, vous pouvez vous référer àInstallation et configuration de Node.js。

Exécuter ES6 dans l'environnement Node.js

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

Utilisez la commande suivante pour afficher les fonctionnalités ES6 que Node a déjà implémentées.

node --v8-options | grep harmony

webpack

webpack est un bundleur de modules statique pour les applications JavaScript modernes. Lorsque webpack traite une application, il construit récursivement un graphe de dépendances contenant chaque module dont l'application a besoin, puis regroupe tous ces modules en un ou plusieurs bundles.

webpack comporte principalement quatre concepts clés :

  • Entrée (entry)
  • Sortie (output)
  • loader
  • Plugins (plugins)

Entrée (entry)

L'entrée indique quel module webpack doit utiliser comme point de départ pour construire son graphe de dépendances interne. Après avoir saisi le point d'entrée, webpack déterminera quels modules et bibliothèques dépendent (directement et indirectement) du point d'entrée. Dans webpack, il existe plusieurs façons de définir l'entrée, comme dans les exemples suivants :

Syntaxe d'entrée unique (raccourcie) :

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

Syntaxe d'objet :

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

Sortie (output) :

La propriété output indique à webpack où générer les bundles qu'il crée et comment nommer ces fichiers. La valeur par défaut est ./dist :

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

loader

Les loaders permettent à webpack de traiter les fichiers non-JavaScript (webpack lui-même ne comprend que JavaScript). Les loaders peuvent convertir tous les types de fichiers en modules que webpack peut traiter efficacement. Par exemple, lors de l'utilisation d'ES6 pendant le développement, utilisez des loaders pour convertir la syntaxe ES6 en ES5, comme configuré ci-dessous :

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"] ] } ] } }

Plugins (plugins)

Les loaders sont utilisés pour convertir certains types de modules, tandis que les plugins peuvent faire bien plus. Cela inclut l'optimisation du bundle, la compression, la définition de variables d'environnement, etc. Les plugins sont puissants et constituent un outil très important pour étendre webpack, et peuvent être utilisés pour gérer diverses tâches. Utiliser un plugin est également très simple - il suffit de le require() puis de l'ajouter au tableau plugins.

//Installer via npm const HtmlWebpackPlugin = require('html-webpack-plugin'); //Utilisé pour accéder aux plugins intégrés const webpack = require('webpack'); const config = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };

Créer des applications avec webpack

webpack.config.js

const path = require('path'); module.exports = { mode: "development", // "production" | "development" //Sélectionnez development pour le mode développement, et production pour le mode production 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: [ ... ] }

L'exemple ci-dessus construit la configuration la plus simple. webpack construira à partir du fichier d'entrée main.js, effectuera la conversion JS via les loaders et produira un fichier nommé bundle.js. À ce stade, l'ensemble du processus est terminé.

gulp

gulp est un outil de compilation automatisé basé sur les flux. Il se caractérise par sa facilité d'utilisation, des compilations rapides, des plugins de haute qualité et une facilité d'apprentissage, et est souvent utilisé dans des projets légers.

Comment l’utiliser ?

Installez gulp globalement :

$ npm install --global gulp

Ajoutez des dépendances au projet :

$ npm install --save-dev gulp

Créez un fichier nommé gulpfile.js dans le répertoire racine du projet :

const gulp = require('gulp');

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

Exécutez gulp :

$ gulp

Créer des applications avec 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')); })

Articles de référence