Javascript Girl
  1. Javascript Girl
  3. En utilisant Babel + grunt pour travailler avec ES6 – comment transformer des déclarations obligatoires?
Intereting Posts
Afficher l'image de repli même si le navigateur prend en charge la vidéo html5 Comment obtenir la somme totale des valeurs de la boîte de saisie à l'aide de Javascript? $ ("# Id option"). Hide (); Ne fonctionne pas sur safari / chrome? Obtention de l'objet JSON à partir du contrôleur MVC Comment faire pivoter un objet de toile après un événement de déplacement de la souris avec un assouplissement? Écran noir lors de la suppression d'une vidéo incorporée de youtube par javascript dans IE8 Comment configurer l'UI matérielle pour réagir avec le type de fichier? Modèle de moustache avec une matrice imbriquée d'objets Comment accéder à un membre externe à partir d'un lit d'objet imbriqué? Utilisation d'une vue de conteneur dans ember.js – comment accéder aux variables parentales depuis la vue de l'enfant Comment cibler .style attribut with .querySelectorAll selector? Comment identifie-t-je uniquement les ordinateurs qui visitent mon site Web? Exécuter la fonction avant que la page n'arrive à window.print () Comment obtenir le texte d'une zone de texte de saisie pendant la touche OnKeyPress? Pourquoi le script ajax et php n'est-il pas posté dans la forme originale

En utilisant Babel + grunt pour travailler avec ES6 – comment transformer des déclarations obligatoires?

Je veux commencer à utiliser ES6, et je veux utiliser grunt pour gérer mes fichiers. Voici ma structure de projet jusqu'à présent: 

Gruntfile.js package.json dist/ src/ index.es6

Et c'est comme index.es6 que index.es6 : 

 import MapGL from 'react-map-gl'; const data = []; const viewport = new Viewport();

Ces paquets sont tous définis dans package.json et installés.

Comment puis-je transformer ce fichier ES6 en ES5 JavaScript? Bien, je peux le transformer en JavaScript d'une sorte, mais il ne transforme pas les instructions obligatoires du tout.

C'est mon Gruntfile actuel: 

 module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } }, jshint: { files: ['src/index.js', 'test/index.js'], options: { reporterOutput: '', esnext: true, globals: { console: true, module: true, document: true } } }, babel: { files: { expand: true, src: ['src/*.es6'], ext: '-compiled.js' }, options: { sourceMap: true, presets: ['babel-preset-es2015'] } }, watch: { files: ['<%= jshint.files %>'], tasks: ['babel', 'jshint', 'concat'] } }); grunt.registerTask('default', ['babel', 'jshint', 'concat', 'uglify']); };

Exécuter grunt produit les fichiers suivants: 

 Gruntfile.js package.json dist/ myproject.js src/ index.es6 index-compiled.js index-compiled.map

Mais myproject.js contient la ligne var _reactMapGl = require('react-map-gl'); Qui échoue dans le navigateur.

Oui, selon la recommandation @Matthew Herbst , Browserify traitera import liaisons d' import pour les modules ES6. De plus, un paquet nommé babelify aidera à gérer votre transformation babel browserify.

Les éléments suivants semblent bien fonctionner:

Utilisez babel-cli au lieu de babel .

  1. Il convient de noter que Babel a été remplacé par babel-cli à partir de babel 6 (voir leur blog pour plus d'informations à ce sujet) . Donc, tout d'abord, supprimez / désinstallez-le de votre package.json (s'il existe!):

    $ npm uninstall babel --save-dev

    … et désinstallez grunt-babel :

    $ npm uninstall grunt-babel --save-dev

  2. Installez babel-cli et incluez également le preset babel pour tous les plugins es2015 :

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

  3. Ensuite, créez un fichier .babelrc et enregistrez-le dans le répertoire racine de vos projets contenant le code suivant: 

  { "presets": ["es2015"] }

grunt-browserify

  1. Ensuite, installez grunt-browserify et enregistrez-le dans votre package.json :

    $ npm install grunt-browserify --save-dev

babelify

  1. Installez babelify pour gérer votre transformation babel browserify:

    $ npm install babelify --save-dev

Gruntfile.js

  1. Prochaine mise à jour de votre Gruntfile.js en supprimant la tâche babel existante: 
  // DELETE the following... babel: { files: { expand: true, src: ['src/*.es6'], ext: '-compiled.js' }, options: { sourceMap: true, presets: ['babel-preset-es2015'] } },
  1. … et en ajoutant la tâche de browserify suivante à la place: 
  browserify: { dist: { files: { // destination for transpiled js : source js 'dist/myproject.js': 'src/index.es6' }, options: { transform: [['babelify', { presets: "es2015" }]], browserifyOptions: { debug: true } } } }
  1. Enregistrement de vos tâches de grognement: il est probable que vous devrez également mettre à jour et modifier l'ordre des tâches dans le tableau passé à grunt.registerTask . Pour ça: 
 grunt.registerTask('default', [ 'jshint', //'concat', <-- Probably don't need to concat the files, assuming index.es6 imports the necessary modules. 'browserify:dist', 'uglify' ]);

Note supplémentaire:

Il peut y avoir des avantages dans l'utilisation de préréglages de réaction en plus des préréglages es2015 – ce qui impliquerait de modifier les points 2, 3 et 7 ci-dessus en conséquence, mais je ne l'ai pas utilisé moi-même.

J'espère que cela t'aides!