SyntaxError：'import'和'export'可能只与'sourceType：module'一起出现 - 等什么？ [英] SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?

问题描述

因此，请考虑以下两个文件：

app.js

 从'./game/game'导入游戏; 
 import从'react'反应; 
从'react-dom'导入ReactDOM; 
 
导出默认（absPath）=> {
 let gameElement = document.getElementById（container）; 
 $ b $ if（gameElement！== null）{
 ReactDOM.render（
< Game mainPath = {absPath} /> ;, 
 gameElement 
 ）; 
 
 
 $ / code $ / pre 
 
 $ p $ index.js / code> 
 从'./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'）; 
 $ b 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]使用gulpfile〜/ Documents / ice-cream / gulpfile.js 
 [13:09:48]从'make：game '... 
 
 events.js：154 
 throw er; //未处理'错误'事件
 ^ 
语法错误：'import'和'export'可能只与'sourceType：module'一起出现
  
 我很抱歉是什么？这个错误是什么？我做错了什么？ 
   

旧版本的Babel带来了一切开箱即用的功能。新版本要求您安装您的设置所需的任何插件。首先，您需要安装ES2015预设。

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

接下来，您需要告诉babelify使用您安装的预设。

  return browserify（{...}）
 .transform（babelify.configure（{
 presets：[es2015] 
}））
 ... 
  

来源

So consider the following two files:

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

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

The error:

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'

Im sorry what? What is this error? What am I doing wrong?

解决方案

Older versions of Babel came with everything out of the box. The newer version requires you install whichever plugins your setup needs. First, you'll need to install the ES2015 preset.

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

Next, you need to tell babelify to use the preset you installed.

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

Source

这篇关于SyntaxError：'import'和'export'可能只与'sourceType：module'一起出现 - 等什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！