SyntaxError: ‘import’ en ‘export’ mogen alleen verschijnen met ‘sourceType: module’ – Gulp

Beschouw de volgende twee bestanden:

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';

De 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/'));
});

De fout:

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'

Wat is deze fout? Wat doe ik verkeerd?

Antwoord 1, autoriteit 100%

Oudere versies van Babel kwamen met alles uit de doos. De nieuwere versie vereist dat u de plug-ins installeert die uw installatie nodig heeft. Eerst moet je de ES2015-voorinstelling installeren.

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

Vervolgens moet je babelify vertellen om de voorinstelling die je hebt geïnstalleerd te gebruiken.

return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...

Bron

Antwoord 2, autoriteit 79%

ESLint ondersteunt dit standaard niet omdat dit in strijd is met de specificaties. Maar als u babel-eslint-parser gebruikt, kunt u dit in uw eslint-configuratiebestand doen:

{
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "allowImportExportEverywhere": true
    }
}

Documentreferentie: https://github.com/babel/babel-eslint#configuration

Antwoord wordt hier verwezen: negeer eslint-fout: ‘import’ en ‘export’ verschijnen mogelijk alleen op het hoogste niveau

Antwoord 3, autoriteit 64%

Ik kwam dezelfde fout tegen en probeerde een module te importeren van node_modulesdie exporteert in ES6-stijl. Niets dat is gesuggereerd op zo uitgewerkt voor mij. Toen vond ik FAQ-sectie op Babelify Repo . Volgens het inzicht daarom verschijnt de fout sinds modules van node_modulesniet worden getranspileerd door standaard en ES6-verklaringen zoals export default ModuleNameIn hen worden niet begrepen door het Node, .js-stijl modules.

Dus ik heb mijn pakketten bijgewerkt en vervolgens gebruikt globalOptie om Babelify uit te voeren als een wereldwijde transformatie die alle knooppuntmodules uitsluit, maar degene die ik geïnteresseerd was in de Pagina van het Babelify Repo:

...    
browserify.transform("babelify", 
    {
        presets: ["@babel/preset-env"], 
        sourceMaps: true, 
        global: true, 
        ignore: [/\/node_modules\/(?!your module folder\/)/]
    }).bundle()
...

Ik hoop dat het helpt.

4, Autoriteit 32%

In . SlinTRC Mogelijk moet u de PARDER-opties specificeren, bijvoorbeeld:

{
"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
    }
}

}

Bekijk de documentatiegids van eslint.

Antwoord 5, autoriteit 21%

Voor het correct compileren van es2015-react-code moet u enkele knooppuntmodules installeren:

wereldwijd

npm install -g browserify

in uw app-directory:

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

Maak vervolgens een sloktaak:

   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 de map ./public/dest/javascripts vindt u een gecompileerd es5 app.js-bestand.

Antwoord 6, autoriteit 11%

Als je iets wilt gebruiken via de importof requiremethode in npm naar clientside, voer dan de volgende stappen uit

1. Ren
   npm install browserify babelify @babel/preset-env @babel/preset-react @babel/core es2015 --save-devom de vereiste voorinstellingen te installeren
2. Voeg deze code toe aan uw package.json

"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ] 
}

3. Maak een bestand met de naam dom_front.jsin de map /appvan het bestand dat u wilt converteren als clientside js.

const ReactDOM  = require('react-dom')
import React, {Component} from 'react' 
export {Component,React,ReactDOM};

Dit zijn de gemengde exportgegevens van modules en vereisen bestanden.

Opmerking: vergeet niet om react-dom & reageren

4. Browserify api gebruiken – maak een js-bestand zoals browserifyload.js en de activamap

const browserify = require("browserify")
const fs = require('fs')
browserify("./dom_front.js", {
  debug : true,
  standalone: "util"
}).transform(['babelify', { compact: false }], {
  global: true,                                  
  ignore: [/\/node_modules\/(?!@vizuaalog\/)/],     
  presets: [ 
    "@babel/preset-env",
    "@babel/preset-react"] 
  }).bundle().on('error', function (err) {
    console.log(err);  
  }).pipe(fs.createWriteStream('assets/mynpmmodule.js')).on('end', function(){
    console.log( 'finished writing the browserify file' );
  });

5. De mappenstructuur is nu

app
--dom_front.js
--browserifyload.js
--assets(folder)

6. Voer /node_proj/app$ node browserifyload.jsuit of voer /node_proj/app$ browserify dom_front.js --transform babelify --standalone util > ./assets/mynpmmodule.js
7. Controleer de activamap, waar het nu het bestand maakt met de naam mynpmmodule.js
8. Voeg dit bestand toe aan uw HTML <script src="assets/mynpmmodule.js"></script>
9. Nu kunt u de geëxporteerde NPM-modules / klassen of vereiste bestanden gebruiken met behulp van de stand-alone-toets die hierboven is vermeld utilals

<script>
  const Component = util.Component;
  console.log(Component);
  const ReactDOM = util.ReactDOM;
</script>

7

Ik heb alle bovenstaande antwoorden geprobeerd, geen van hen werkte voor mij, ik heb zelfs geprobeerd GULP-include / vereisen syntaxis , ze waren noch de oplossing noch genoeg voor mijn vereiste.

Hier was mijn vereiste.

1. Bundel alle modules / bestanden in één
2. Houd alle opmerkingen / JSDOCS
3. Houd alle typen (zoals const example = (parameter: string) => {})
4. Gebruik import / export syntaxis

De reden voor de vermelde vereisten is omdat we een repository nodig hebben om onze gedeelde-functie, shared-config, gedeelde-typen en gedeelde constanten als een NPM-pakket (installatie met URL) op te slaan. In dit geval weten we al dat onze projecten allemaal typescript gebruiken, dus het is niet nodig om onze gedeelde module in .jste compileren, en we moeten ook alle beschrijvingen als andere pakketten doen (JSDOC en Type help echt).

Tot nu toe de beste die ik kan doen is het gebruik van browserifymet tsify. Ik heb deze oplossing per ongeluk gevonden van hier .

browserify()
    .plugin(tsify, { target: 'es6' })
    .transform(babelify, { extensions: [ '.tsx', '.ts' ] })

Ik ben nog steeds op zoek naar een manier om onze inline-types en opmerkingen / jskocs te houden, maar ik geloof dat dit genoeg is voor uw behoefte.

8

Deze fout kan worden veroorzaakt door het niet opnemen van tsify-plug-in om typescript te compileren in de GULP-taak.

Voorbeeld

   var tsify = require('tsify');
    return browserify({ ... })
      .plugin(tsify)
      .transform(babelify.configure({
        presets: ["es2015"]
      }))
      ...

Zie hier installeren en gebruik:
https://www.npmjs.com/package/timesify

9

In mijn geval gebruikte ik export in plaats van export .

Wijzig Export naar export .