SyntaxError: "импорт" и "экспорт" могут отображаться только с "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'

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

9
babel browserify ecmascript-6 gulp javascript

6 ответов

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

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

Doc ref:https://github.com/babel/babel-eslint#configuration

ответ, указанный здесь:игнорировать ошибку eslint: "импорт" и "экспорт" могут отображаться только на верхнем уровне

0

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

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

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

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

источник

10

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

  1. npm install - g browserify

в приложения директорию:

  1. npm установить browserify --save
  2. npm установить babelify --save
  3. npm установить babel-preset-es2015 --сохранить
  4. npm установить babel-preset-stage-0 --сохранить

  5. npm установить babel-preset-react --сохранить Затем создать задачу залпом:

    var browserify = требовать ("browserify"); var babelify = требовать ("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 .каталог/public/dest / javascripts вы найдете скомпилированное приложение es5.файл js.

3

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

пример

    var tsify = require('tsify');

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

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

0

по какой-то причине babelify 8.0.0 не работал для меня ни с подарками es2015, ни с env. Однако,по состоянию на 2018-07-10, the 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.

0

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

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

0