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'
извините, что? Что это за ошибка? Что я делаю не так?
6 ответов
ESLint изначально не поддерживает это, потому что это противоречит спецификации. Но если вы используете парсер babel-eslint, то внутри вашего конфигурационного файла eslint вы можете сделать следующее:
{
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
}
}
Doc ref:https://github.com/babel/babel-eslint#configuration
ответ, указанный здесь:игнорировать ошибку eslint: "импорт" и "экспорт" могут отображаться только на верхнем уровне
старые версии Babel пришли со всем из коробки. Более новая версия требует установки плагинов, необходимых для установки. Во-первых, вам нужно установить предустановку ES2015.
npm install babel-preset-es2015 --save-dev
Далее, вам нужно сказать babelify использовать установленный вами пресет.
return browserify({ ... })
.transform(babelify.configure({
presets: ["es2015"]
}))
...
для правильной компиляции кода es2015-react необходимо установить несколько модулей узлов:
- npm install - g browserify
в приложения директорию:
- npm установить browserify --save
- npm установить babelify --save
- npm установить babel-preset-es2015 --сохранить
- npm установить babel-preset-stage-0 --сохранить
-
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.
эта ошибка может быть вызвана не включением плагина tsify для компиляции typescript в задачу gulp.
пример
var tsify = require('tsify');
return browserify({ ... })
.plugin(tsify)
.transform(babelify.configure({
presets: ["es2015"]
}))
...
см. раздел Установка и использование здесь: https://www.npmjs.com/package/tsify
по какой-то причине 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.