web-dev-qa-db-fra.com

Utiliser Babel + grunt pour travailler avec ES6 - comment transformer les instructions require?

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

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

Et voici à quoi ressemble index.es6:

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

Ces packages sont tous définis dans package.json Et installés.

Comment transformer ce fichier ES6 en JavaScript ES5? À droite, je suis en mesure de le transformer en JavaScript, mais cela ne transforme pas du tout les instructions require.

Voici 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']);
};

L'exécution de 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.

javascriptgruntjsecmascript-6babel
10
Richard

Oui, conformément à la recommandation @ Matthew Herbst , Browserify gérera les liaisons import pour les modules ES6. Un package nommé babelify aidera également à gérer votre transformation babel browserify.

Les éléments suivants semblent bien fonctionner:

Utilisation babel-cli au lieu de babel.

  1. Il est à 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ésinstaller grunt-babel :

    $ npm uninstall grunt-babel --save-dev

  2. Installez babel-cli et incluez également le préréglage 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. Mettez à jour 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 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'
]);

Remarque additionnelle:

Il y a peut-être certains avantages à utiliser réagir aux préréglages en plus des préréglages es2015 - ce qui impliquerait de modifier les points 2, 3 et 7 ci-dessus en conséquence, cependant, je ne l'ai pas utilisé moi-même.

J'espère que cela t'aides!

24
RobC