SyntaxError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现 - Gulp

IT技术 javascript gulp ecmascript-6 browserify babeljs
2021-03-03 18:27:30

考虑以下两个文件：

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个回答

旧版本的 Babel 随附开箱即用的所有内容。较新的版本要求您安装设置所需的任何插件。首先，您需要安装 ES2015 预设。

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

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

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

来源

我完全删除了这个包，但不知道 babel 6.17 需要它。有趣。谢谢。
2021-04-16 18:27:30
我还需要 -- npm install babel-preset-env 然后，从命令行，做了： browserify src/app.js -t [ stringify --extensions [ .bpmn ] ] -g [ babelify --presets [ "es2015" ] ] -o src/app.bundled.js
2021-04-17 18:27:30
你能用 angular 2 的 webpack 展示这个例子吗
2021-04-20 18:27:30
@MikeCluck 你能澄清一下 babelify.configure 步骤吗？您的代码片段说它返回 browserify，但是从什么函数返回？如何全局使我的typescript在 ES6 中运行？
2021-04-30 18:27:30
@sainu 有一个关于如何开始使用 Angular的完整教程，它将为您提供一个支持import和export. 更不用说这个问题是关于使用 Browserify，而不是 Webpack。
2021-05-08 18:27:30

ESLint 本身不支持这一点，因为这违反了规范。但是如果你使用 babel-eslint 解析器，那么在你的 eslint 配置文件中你可以这样做：

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

文档参考：https : //github.com/babel/babel-eslint#configuration

从这里引用的答案：忽略 eslint 错误：'import' 和 'export' 可能只出现在顶层

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

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

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

希望能帮助到你。

节省了一天。这是您应该使用的正确答案，preset-env而不是 es2015
2021-04-15 18:27:30
你能解释一下“你的module文件夹”应该在node_modules里面吗？我查看了 repo 自述文件，但也没有说清楚。
2021-05-08 18:27:30
我尝试了上述方法，但对我不起作用。你能看看这个问题吗
2021-05-09 18:27:30
@NikolayDyankov 它实际上是所需包的文件夹，通常位于某种入口点（导出您需要的东西）。通常，它是放置 index.js 等的文件夹。包的根类型。希望你能明白。
2021-05-10 18:27:30

出于某种原因，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 文件

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

esmify 做的工作！
2021-05-03 18:27:30

在.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的文档指南。

其它你可能感兴趣的问题
上一篇ES6 module导入给出“Uncaught SyntaxError: Unexpected identifier” 下一篇如何限制在 html 选择框中选择的选项？