Javascript SyntaxError:'；导入&x27；和'；出口'；只能与'；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
      );
  }
}

import App from './src/app';

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

gulpfile.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
      );
  }
}

import App from './src/app';

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'

---

这是什么错误？我做错了什么？

旧版本的Babel都是开箱即用的。新版本要求您安装安装程序需要的任何插件。首先，您需要安装ES2015预设

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

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

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

---

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

全球

npm安装-g browserify

在应用程序目录中：

npm init

npm安装--保存开发浏览器浏览babelify babel-preset-es2015 babel-preset-stage-0 babel-preset

然后创建吞咽任务：

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

此错误可能是由于在gulp任务中未包含tsify plugin来编译typescript造成的

范例

    var tsify = require('tsify');

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

请参见此处的安装和使用：

---

出于某种原因，babelify 8.0.0在es2015或env礼品上都不适合我。然而，我的插件确实对我有用。我的测试用例是作为全局窗口从导出

Spinner

。我的例子是回购；关键细节如下

main.js

从'spin.js'导入{Spinner}；
window.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文件

var target=document.getElementById（'x'）；
var spin=新微调器（）.spin（目标）；

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

---

注意：我与mattdesl或esmify没有关联。

在我的案例中，我使用了导出，而不是导出

---

将export更改为exportsESLint本机不支持此操作，因为这违反了规范。但是如果使用babel ESLint解析器，则可以在ESLint配置文件中执行此操作：

{
“解析器”：“babel eslint”，
“解析选项”：{
“源类型”：“模块”，
“AllowPortExporterywhere”：true
}
}

文件编号：

---

此处引用的答案：

在.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
    }
}

}

---

请查看中的文档指南。

我在尝试从以ES6样式导出的

node\u modules

导入模块时遇到相同的错误。对我来说，没有什么建议是如此有效。然后我在上找到了常见问题部分。根据那里的了解，出现错误是因为默认情况下不会传输

node_modules

中的模块，并且由Common.js风格模块驱动的节点无法理解其中的ES6声明，如

export default ModuleName

因此，我更新了我的软件包，然后使用

global

选项将babelify作为全局转换运行，不包括所有节点模块，但我感兴趣的模块，如babelify repo页面所示：

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

---

希望对您有所帮助。

如果您想通过npm中的

import

或

require

方法在客户端使用任何东西，只需执行以下步骤

跑

npm install browserify babelify@babel/preset env@babel/preset react@babel/core es2015——保存开发文件

以安装所需的预设

将此代码添加到您的

包.json

在

/app

文件夹中创建一个名为

dom_front.js

的文件，该文件夹包含要转换为客户端js的文件

这是模块和所需文件的混合导出数据

注意：别忘了安装react-dom&react

使用browserify api-创建js文件，如browserifyload.js和assets文件夹

现在文件夹结构是

运行

/node\u proj/app$node browserifyload.js

或运行

/node\u proj/app$browserify dom\u front.js--transform babelify--standalone util>/assets/mynpmmodule.js

检查资产文件夹，它现在在那里创建名为

mynpmmodule.js的文件

将此文件添加到HTML

现在，您可以使用上面提到的独立键使用导出的npm模块/类或所需的文件

util

like

const Component=util.Component；
控制台日志（组件）；
const ReactDOM=util.ReactDOM；

我尝试了上面的所有答案，没有一个对我有效，我甚至尝试使用gulp include/require syntax，它们既不是解决方案，也不足以满足我的要求

这是我的要求

将所有模块/文件捆绑成一个

保留所有评论/文档

保留所有类型（例如

const-example=（参数：string）=>{}

）

使用导入/导出语法

之所以列出这些要求，是因为我们需要一个存储库，将共享函数、共享配置、共享类型和共享常量存储为npm包（使用URL安装）。在这种情况下，我们已经知道我们的项目都在使用TypeScript，因此不需要将共享模块编译成

.js

，我们还需要像其他软件包一样保留所有描述（JSDoc和Type真的很有帮助）

到目前为止，我能做的最好的事情就是将

browserify

与

tsify

一起使用。我无意中从中发现了此解决方法

---

我仍在寻找一种方法来保留我们的内联类型和注释/JSDocs，但我相信这足以满足您的需要。

请看，在babelify中使用较新版本的Babel似乎有问题。在我的情况下，我没有使用babelify，但仍然会出现此错误。在我的情况下，我在尝试编译导入TypeScript文件的JS文件时，遇到了browserify和babelify的这个错误，例如import*

<script>
  const Component = util.Component;
  console.log(Component);
  const ReactDOM = util.ReactDOM;
</script>

browserify()
    .plugin(tsify, { target: 'es6' })
    .transform(babelify, { extensions: [ '.tsx', '.ts' ] })