it-swarm.com.ru

SyntaxError: 'import' и 'export' могут появляться только с 'sourceType: module' - Подождите, что?

Итак, рассмотрим следующие два файла:

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

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

Ошибка:

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'

Извините, что? Что это за ошибка? Что я делаю не так?

13
TheWebs

ESLint изначально не поддерживает это, потому что это противоречит спецификации. Но если вы используете анализатор babel-eslint, то внутри вашего конфигурационного файла eslint вы можете сделать это:

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

Ссылка на документ: https://github.com/babel/babel-eslint#configuration

Ответ отсюда: игнорировать ошибку eslint: «импорт» и «экспорт» могут появляться только на верхнем уровне

8
kaushalop

Старые версии Babel поставлялись со всем из коробки. Более новая версия требует, чтобы вы установили те плагины, которые нужны вашей установке. Во-первых, вам нужно установить предустановку ES2015.

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

Далее вам нужно сказать babelify, чтобы использовать установленный вами пресет.

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

Источник

11
Mike Cluck

Для правильной компиляции кода es2015-response вам необходимо установить несколько узловых модулей:

глобально

  1. npm install -g browserify

в каталоге вашего приложения:

  1. npm установить browserify --save-dev
  2. npm установить babelify --save-dev
  3. npm install babel-preset-es2015 --save-dev
  4. npm установить babel-preset-stage-0 --save-dev
  5. npm установить babel-preset-реагировать --save-dev Затем создать задачу gulp:

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

    В каталоге ./public/dest/javascripts вы найдете скомпилированный файл es5 app.js.

3
Red Efire

По какой-то причине babelify 8.0.0 не работает для меня ни с подарками es2015, ни с env. Однако по состоянию на 2018-07-10 , плагин esmify от mattdesl сработал для меня. Мой тестовый пример экспортировал Spinner из spin.js как глобальное окно. Мой пример репо: здесь ; ключевые детали следуют.

main.js

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

Тестовое задание

В пустой директории:

npm init

и принять все значения по умолчанию, затем:

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

Тестовый файл HTML

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

При загрузке в центре страницы отображается счетчик.

Примечание: я не связан с mattdesl или esmify.

1
cxw

Эта ошибка может быть вызвана отсутствием подключаемого модуля tsify для компиляции TypeScript в задаче gulp.

пример

    var tsify = require('tsify');

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

Смотрите установку и использование здесь: https://www.npmjs.com/package/tsify

0
Stuart Bentley

в моем случае я использовал экспорт вместо экспорт .

изменить экспорт к экспорт .

0
saigopi