Comment utiliser les modules ECMAScript6 dans les pages Web
Je suis plutôt enthousiaste à l'idée d'utiliser les fonctionnalités d'ECMAScript 6 via Babeljs - en particulier, j'aimerais commencer à rendre mon code JavaScript plus modulaire grâce à la nouvelle fonctionnalité de modules.
Voici ce que j'ai écrit jusqu'à présent:
// ECMAScript 6 code - lib.js
export const sqrt = Math.sqrt;
export function square (x) {
return x * x;
}
export function diag (x, y) {
return sqrt(square(x) + square(y));
}
// ECMAScript 6 code - main.js
import { square, diag } from 'lib';
console.log(square(11));
console.log(diag(4, 3));
Je comprends que je peux transcrire ce code de ES6 à ES5 via babel en ligne de commande:
babel lib.js > lib6to5.js
babel main.js > main6to5.js
Mais que dois-je faire pour utiliser ce code dans mon code HTML?
Par exemple, à quoi ressemblerait ce fichier index.html:
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ECMAScript 6</title>
<!-- What goes here?
How do I include main6to5.js and lib6to5.js to make this work in the browser? -->
<script src="?????"></script>
</head>
<body>
</body>
</html>
Je vous remercie
Sans utiliser les modules: Si vous n'utilisez pas de modules (imports/exports), vous pouvez simplement transpiler votre code dans ES5 et inclure ces fichiers ES5 dans votre code html . Exemple:
// ES6 - index.js
// arrow function
var result = [1, 2, 3].map(n => n * 2);
console.log(result);
// enhanced object literal
var project = "helloWorld";
var obj = {
// Shorthand for ‘project: project’
project,
// Methods
printProject() {
console.log(this.project);
},
[ "prop_" + (() => 42)() ]: 42
};
console.log(obj.printProject());
console.log(obj);
Transpiler en es5: babel index.js > es5.js
Dans index.html, incluez <script src="es5.js"></script> Ce qui suit sera imprimé dans la console:
[2,4,6]
helloWorld
{"project":"helloWorld","prop_42":42}
Utilisation de modules: Maintenant, si vous utilisez des modules (comme c'est le cas avec lib.js et main.js), après avoir converti votre code en ES5, vous devez également les regrouper (depuis AMD/CommonJS/Modules pour obtenir un code compréhensible par votre navigateur). ). Vous pouvez le faire avec divers systèmes de compilation comme gulp , webpack , browserify , etc. Je vais utiliser browserify comme exemple ici.
Dites que ma structure de dossier ressemble à ceci:
es6
|- src
|- lib.js
|- main.js
|- compiled
|- index.html
Je lance babel pour transpiler mes fichiers /src dans le dossier /compiled: babel src --out-dir compiled.
Maintenant, j'ai mon code ES5 dans le dossier compilé. J'installe browserify dans la ligne de commande puis associe mon main.js (point d'entrée) à mon dossier compilé.
~/es6 » npm install --global browserify
~/es6 » browserify ./compiled/main.js -o ./bundle.js
Maintenant, j'ai bundle.js qui ressemble à ceci:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
exports.square = square;
exports.diag = diag;
var sqrt = exports.sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
Object.defineProperty(exports, "__esModule", {
value: true
});
},{}],2:[function(require,module,exports){
"use strict";
var _lib = require("./lib");
var square = _lib.square;
var diag = _lib.diag;
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
},{"./lib":1}]},{},[2]);
Puis dans votre index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ECMAScript 6</title>
<script src="./bundle.js"></script>
</head>
<body>
</body>
</html>
Ensuite, ouvrez simplement votre index.html et votre console devrait vous donner les informations suivantes:
121 bundle.js:27
5 bundle.js:28
J'ai commencé par essayer la même chose, mais j'ai finalement découvert que Gulp avait beaucoup aidé.
Une chose à garder à l'esprit: babel source.js > destination.js ne polyfillera pas la nouvelle syntaxe ES6. Votre code, à l'heure actuelle, n'utilise aucune instruction let, aucune affectation déstructurée, aucune fonction génératrice, etc. mais si vous ajoutez cela ultérieurement, vous aurez besoin d'une transformation plus sophistiquée.
Voici une réponse qui explique comment configurer le fichier gulp: Utilisation du module d’exportation Javascript 6to5 (maintenant Babel) (Avertissement: c’est l’une de mes réponses: P)
Voici les étapes spécifiques à votre cas:
- Créez un fichier appelé
gulpfile.jsdans votre répertoire avec les éléments suivants:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify= require('babelify');
var util = require('gulp-util');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('build', function() {
browserify(['./lib.js', './main.js'], { debug: true })
.add(require.resolve('babel/polyfill'))
.transform(babelify)
.bundle()
.on('error', util.log.bind(util, 'Browserify Error'))
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify({ mangle: false }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['build']);
- Exécutez
npm install gulp browserify babel babelify gulp-util vinyl-buffer vinyl-source-stream gulp-uglify gulp-sourcemapspour installer les dépendances nécessaires. - Exécutez
gulppour tout regrouper. - Utilisez le script fourni dans votre code HTML avec cet élément:
<script src="app.js"></script>
La bonne chose, en plus des polyfill ajoutés, est que le code est minifié et que vous obtenez des cartes source, ce qui signifie que même dans vos outils de développement, vous pouvez déboguer le code ES6 lui-même.
Remarque: Bien que l'instruction d'importation que vous utilisez soit correcte conformément à la spécification de projet de l'ES6, Babel ne l'aimera pas. Vous devrez ajouter un ./ pour qu'il ressemble à ceci:
import { square, diag } from './lib';
Je suppose que cela est dû au fait que la transformation se produit dans Node.js, ce qui différencie un fichier d’un module de nœud. En parallèle, vous pouvez écrire ES6 pour les besoins de noeud avec les instructions d'importation :)
[Note: Je réalise que ma réponse est médiocre, car elle ne reflète pas complètement L'intention des interrogateurs d'utiliser des modules ES6 via babeljs dans un flux de travail frontal . Conserver la réponse pour elle ceux qui souhaitent utiliser les modules ES6 dans une page Web]} _
Essayez d’utiliser jspm.io pour charger les modules ES6 dans le navigateur sans transpiler à l’avant avec babel . Un plunker peut être trouvé ici
jspm fonctionne sur system.js qui tente d’être un chargeur pour n’importe quel format de module (ES6, AMD, CommonJS).
Pour que cela fonctionne dans mon navigateur, je me suis basé sur cette démo de jspm ES6 . Vous venez de copier System.js _ et es6-module-loader.js dans un dossier js/lib et de copier vos fichiers es6 js dans le dossier js. Ensuite, le code HTML ressemble à ceci:
<html>
<body>
Test .. just open up the Chrome Devtools console to see the ES6 modules output using jspm
<script src="js/lib/system.js"></script>
<script>System.import("main");</script> </body>
</html>
Un plunker peut être trouvé ici
Un des commutateurs --modules compilera-t-il dans JS qui peut être directement inclus dans une page Web de la même manière que l'indicateur --script sera compilé dans le navigateur JS (--script ne peut pas être utilisé avec des modules)? Voir https://github.com/google/traceur-compiler/wiki/Options-for-Compiling