Mit Babel + grunt Arbeit mit ES6 - how zu transformieren erfordern Aussagen?

Beginnen möchte ich mit ES6, und ich will grunt zum verwalten meiner Dateien. Das ist meine Projekt-Struktur so weit:

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

Und das ist, was index.es6 aussieht:

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

Diese Pakete sind alle definiert, in package.json und installiert.

Wie schalte ich das ES6-Datei in ES5 JavaScript? Recht bin ich in der Lage, um es in JavaScript eine Art, aber es ist nicht die Umwandlung der require Aussagen überhaupt.

Dies ist meine aktuelle Gruntfile:

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äuft grunt erzeugt die folgenden Dateien:

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

Aber myproject.js enthält die Zeile var _reactMapGl = require('react-map-gl'); was nicht im browser.

Sie benötigen ein transpiler wie babel in Ihrem Grunzen pipeline. Konvertieren (transpile) Ihren code, egal von welcher Versionen von js in ES5 das ist der aktuelle standard für Browser.
github.com/babel/grunt-babel
Sie werden wahrscheinlich auch wollen, etwas zu verwenden, wie Browserify in Ihre pipeline zu handhaben, wodurch alle Ihre Einfuhren und solche.
danke. Ich bin schon über babel, die Zeile grunt.registerTask('default', ['babel', 'jshint', 'concat', 'uglify']) im gruntfile. Brauche ich browserify?
Oh sorry, habe ich verpasst. Ja, werden Sie wahrscheinlich benötigen, Browserify, als auch - in seiner einfachsten Form wird es ausgegeben wird, eine einzelne Datei aus aller Module

InformationsquelleAutor Richard | 2016-12-09

  1. 21

    Ja, als pro @Matthew Herbst Empfehlung, Browserify mit der import Bindungen für die ES6-Module. Auch ein Paket mit dem Namen babelify wird helfen, um Ihre babel browserify verwandeln.

    Folgende scheint gut zu funktionieren:

    Verwenden babel-cli statt babel.

    1. Es ist erwähnenswert, dass Babel wurde ersetzt mit babel-cli als babel 6 (siehe Ihre blog für mehr Infos).
      Also, Erstens, entfernen/deinstallieren Sie es von Ihrem package.json (falls vorhanden!):

      $ npm uninstall babel --save-dev

      ...und deinstallieren grunt-babel:

      $ npm uninstall grunt-babel --save-dev

    2. Installieren babel-cli und auch die babel Voreinstellung für alle es2015 plugins:

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

    3. Als Nächstes erstellen Sie eine .babelrc - Datei und speichern Sie es in Ihren Projekten root-Verzeichnis mit dem folgenden code:

        {
        "presets": ["es2015"]
    }

    grunt-browserify

    1. Als Nächstes installieren Sie grunt-browserify und speichern Sie es auf Ihrem package.json:

      $ npm install grunt-browserify --save-dev

    babelify

    1. Installieren babelify, um Ihre babel browserify-transform:

      $ npm install babelify --save-dev

    Gruntfile.js

    1. Nächsten update Ihre Gruntfile.js durch löschen die bestehenden babel Aufgabe:
        //DELETE the following...
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },
    1. ...und hinzufügen die folgenden browserify Aufgabe statt:
        browserify: {
        dist: {
            files: {
                //destination for transpiled js : source js
                'dist/myproject.js': 'src/index.es6'
            },
            options: {
                transform: [['babelify', { presets: "es2015" }]],
                browserifyOptions: {
                    debug: true
                }
            }
        }
    }
    1. Registrierung Ihres Grunzen Aufgaben:
      Es ist wahrscheinlich, dass Sie auch brauchen, um zu aktualisieren und ändern Sie die Reihenfolge der Aufgaben in den array übergeben grunt.registerTask. Zu:
    grunt.registerTask('default', [
    'jshint',
    //'concat', <-- Probably don't need to concat the files, assuming index.es6 imports the necessary modules.
    'browserify:dist',
    'uglify'
]);

    Zusätzlicher Hinweis:

    Dort kann einige Vorteile bei der Verwendung reagieren presets zusätzlich zu den es2015 presets - das würde bedeuten, ändern die Punkte 2, 3 und 7 oben entsprechend, aber ich habe nicht verwendet es selbst.

    Hoffe, das hilft!

    Dieser arbeitete für mich. Wenn Sie Fehler geworfen von jshint ausgeführt wird, fügen Sie "esversion": 6 zu den "jshint" beschrieben gruntfile.js
    Ja, guter Fang! esnext option verworfen wurde zugunsten von esversion.
    Funktioniert wie Charme.
    Das ist genial, da wir noch immer verwenden Grunzen und musste vue zu arbeiten. Eine weitere Sache zu beachten ist, verspricht noch nicht die Arbeit in Umgebungen wie IE11. Um das zu beheben, "npm install --save-babel-polyfill" und fügen Sie diese Zeile am Anfang des Skripts die Datei "importieren "babel-polyfill";"
    Ich erhielt die folgende Fehlermeldung folgenden die Schritte oben: "Fatal error: Cannot find module '@babel/core' babelify@10 erfordert Babel 7.x (das Paket '@babel/core'). Wenn Sie möchten, um zu verwenden Babel 6.x ('babel-core"), sollten Sie 'babelify@8'." und war in der Lage, es zu beheben, durch ausführen npm install @babel/core --save-dev

    InformationsquelleAutor RobC

Schreibe einen Kommentar