SyntaxError:'import'和'export'可能只出现'sourceType:module' - 等什么？

Question

请考虑以下两个文件:

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'

对不起什么？这个错误是什么？我究竟做错了什么？

Answer 1

我在尝试从node_modulesES6 样式的导出中导入模块时遇到了同样的错误。没有任何关于 SO 的建议对我有用。然后我在babelify repo上找到了常见问题解答部分。根据那里的见解，出现错误是因为node_modules默认情况下不会转译来自模块的模块，并且export default ModuleName由 Common.js 样式模块提供支持的节点无法理解其中的ES6 声明。

因此，我更新了我的包，然后使用global选项将 babelify 作为全局转换运行，不包括所有节点模块，但我感兴趣的模块如 babelify 存储库页面所示：

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

希望能帮助到你。

Answer 2

较旧版本的Babel带有开箱即用的东西.较新的版本要求您安装设置所需的任何插件.首先,您需要安装ES2015预设.

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

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

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

资源

Answer 3

出于某种原因，babelify 8.0.0 对我来说不管是 es2015 还是 env 都不起作用。但是，截至 2018 年 7 月 10日，mattdesl的esmify插件确实对我有用。我的测试用例是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 文件

npm init

加载后，它会在页面中央显示一个微调器。

_{注意：我不隶属于 mattdesl 或 esmify。}

Answer 4

ESLint本身并不支持这一点,因为这违反了规范.但是如果你使用babel-eslint解析器然后在你的eslint配置文件中你可以这样做:

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

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

这里提到的答案:忽略eslint错误:'import'和'export'可能只出现在顶层

Answer 5

在.eslintrc 中，您可能必须指定解析器选项，例如：

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

}

请查看eslint的文档指南。

Answer 6

为了正确编译 es2015-react 代码，您应该安装一些节点模块：

全球

npm install -g browserify

在您的应用程序目录中：

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

然后创建 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 文件。