SyntaxError: 'import' und 'export' erscheinen können, nur mit "sourceType: Modul' - Warten Sie, was?

So betrachten Sie die folgenden zwei Dateien:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

Den gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

Den Fehler:

gulp make:game
[13:09:48] Using gulpfile ~/Documents/ice-cream/gulpfile.js
[13:09:48] Starting 'make:game'...

events.js:154
      throw er; //Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Es tut mir Leid, was? Was ist dieser Fehler? Was mache ich falsch?

Siehe dieses Problem ist auf GitHub. Es scheint ein problem mit der Verwendung einer neueren version von Babel mit babelify.
In meinem Fall, ich bin nicht mit babelify aber immer noch diese Fehlermeldung erhalten.
In meinem Fall war ich immer diesen Fehler mit browserify und babelify, wenn Sie versuchen zu kompilieren, JS-Dateien, importiert TypeScript-Dateien, wie z.B. import * als Foo aus "./foo" (foo.ts). Das Update wurde übergeben --extensions ".ts,.js" zu den babelify verwandeln (also zu babel umfassen würde, die TS-Dateien in der Zusammenstellung) und --extension=.js --extension=.ts zu browserify (so browserify lösen könnte die filepaths von import-Anweisungen). Beachten Sie, dass die babel -- - Erweiterungen-option scheint nicht dokumentiert zu werden, in die babel - Optionen-ich fand heraus, über es, hier.

InformationsquelleAutor TheWebs | 2016-10-13

16

Älteren Versionen von Babel, kam mit alles out of the box. Die neuere version erfordert, dass Sie installieren, je nachdem welche plugins Ihr setup benötigt. Zuerst müssen Sie die Installation der ES2015 preset.
```
npm install babel-preset-es2015 --save-dev
```
Als Nächstes müssen Sie sagen, babelify verwenden die Vorgabe, die Sie installiert haben.
```
return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...
```
Quelle
- Ich bin völlig entfernt dieses Paket nicht zu wissen, brauchte ich es für babel 6.17. Interessant.Danke.
- können Sie bitte zeigen Sie dieses Beispiel mit webpack im Winkel 2
- Es ist ein vollwertiges tutorial an wie man mit dem Winkel, der Ihnen eine Entwicklungsumgebung unterstützt, die die import und export. Nicht zu erwähnen, diese Frage ist über die Verwendung von Browserify, nicht Webpack.
- Ich musste auch -- npm installieren babel-preset-env Dann, von der Kommandozeile hat: browserify src/app.js -t [ stringify --extensions [ .bpmn ] ] -g [ babelify --presets [ "es2015" ] ] -o src/app.bundled.js
- könnten Sie bitte klären Sie die babelify.konfigurieren Sie Schritt? Ihr code-snippet sagt, es gibt browserify, sondern von dem, was Funktion? Wie kann ich das Global dazu führen, dass mein Niederschrift zu führen, die in ES6?
InformationsquelleAutor Mike Cluck
11

ESLint nativ nicht unterstützen, weil dies gegen die spec. Aber wenn Sie mit babel-eslint-parser dann in Ihrem eslint config-Datei, die Sie dies tun können:

JS:
```
{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  }
}
```
Doc ref: https://github.com/babel/babel-eslint#configuration

Antwort bezog von hier : ignorieren eslint Fehler: 'import' und 'export' kann nur erscheinen auf der obersten Ebene

InformationsquelleAutor kaushalop

Für die richtige Zusammenstellung es2015-reagieren-code, den Sie installieren sollten einige Knoten Module:

Global

npm install -g browserify

in Ihrem app-Verzeichnis:

npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-stage-0 babel-preset-react

Dann erstellen gulp task:

    var browserify = require("browserify");
    var babelify = require("babelify");

    gulp.task('es6-compile', function() {
      browserify({ debug: true })
        .transform(babelify.configure({ presets: ["es2015","react", "stage-0"] }))
        .require("./public/src/javascripts/app.js", { entry: true })
        .bundle()
        .pipe(gulp.dest('./public/dest/javascripts'));
    });

In ./öffentliche/dest/javascripts-Verzeichnis finden Sie zusammengestellt es5 app.js Datei.

Ich glaube nicht, verwenden babel, ich möchte nur zu verwenden, browserify zu bündeln Module. Ist das möglich mit import / export?

InformationsquelleAutor Red Efire

Aus irgendeinem Grund, babelify 8.0.0 hat bei mir nicht funktioniert-entweder mit der es2015 oder env präsentiert. Allerdings als der 2018-07-10, die esmify plugin von mattdesl hat Arbeit für mich. Mein Testfall war der Export Spinner aus spin.js als Fenster global. Mein Beispiel repo ist hier; wichtige details verfolgen.

`main.js`

import {Spinner} from 'spin.js';
window.Spinner = Spinner;

Test

In ein leeres Verzeichnis:

npm init

und akzeptieren Sie alle Standardeinstellungen, dann:

npm install --save spin.js
npm install --save-dev browserify esmify
npx browserify -p esmify main.js -o main-packed.js

Test-HTML-Datei

<html><head>
    <link rel="stylesheet" href="node_modules/spin.js/spin.css" />
    <script src="main-packed.js"></script>    <!-- <== the browserify output -->
</head>
<body>
    <div id="x"></div>
    <script>
    var target = document.getElementById('x');
    var spin = new Spinner().spin(target);
    </script>
</body></html>

Wenn es geladen wird, zeigt er ein spinner in der Mitte der Seite.

_{Hinweis: ich bin nicht verbunden mit mattdesl oder esmify.}

InformationsquelleAutor cxw

1

Stieß ich auf den gleichen Fehler versucht zu importieren, die ein Modul aus node_modules dass die Ausfuhren in ES6-Stil. Nichts, der vorgeschlagen wurde, SO funktionierte für mich. Dann fand ich FAQ-Bereich auf babelify repo. Nach der Einsicht von dort werden die Fehler angezeigt, da Module aus node_modules sind nicht transpiled standardmäßig und ES6 Erklärungen wie export default ModuleName in Ihnen nicht verstanden werden, indem Knoten powered by Verbreitet.js-Stil Module.

So, ich aktualisierte meine Pakete und dann global option ausgeführt babelify als eine Globale Transformation ohne Knoten alle Module, aber die, die ich war daran interessiert, wie angegeben auf der babelify repo-Seite:
```
...    
browserify.transform("babelify", 
    {
        presets: ["@babel/preset-env"], 
        sourceMaps: true, 
        global: true, 
        ignore: [/\/node_modules\/(?!your module folder\/)/]
    }).bundle()
...
```
Hoffe, es hilft.

InformationsquelleAutor curveball

In .eslintrc müssen Sie angeben, die der parser-Optionen, zum Beispiel:

{
"rules": {
    "indent": [
        2,
        4
    ],
    "linebreak-style": [
        2,
        "unix"
    ],
    "semi": [
        2,
        "always"
    ]
},
"env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

}

Bitte überprüfen Sie in der Dokumentation Anleitung von eslint.

InformationsquelleAutor Stefan Ciprian Hotoleanu

-1

Dieser Fehler kann verursacht werden, indem nicht wie tsify plugin zu kompilieren Typoskript in der gulp-task.

Beispiel
```
    var tsify = require('tsify');

    return browserify({ ... })
      .plugin(tsify)
      .transform(babelify.configure({
        presets: ["es2015"]
      }))
      ...
```
Finden Sie unter installation und Nutzung hier:
https://www.npmjs.com/package/tsify

InformationsquelleAutor Stuart Bentley
-3

in meinem Fall habe ich export statt Exporte.

ändern export zu Exporte.
- das ist falsch. die es6-syntax ist export.
- obwohl es funktioniert das ist, warum ich meine Antwort gepostet
- eine Menge Dinge, die Arbeit nicht korrekt Antworten. Löschen Sie alle js, und ersetzen Sie die Homepage mit einer Reihe statischer img und onclick ändert sich die Seite auch "Arbeit" aber ist es nicht eine Antwort auf die Frage.
InformationsquelleAutor saigopi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.