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

时间：2016-10-13 19:13:08

标签： javascript gulp ecmascript-6 browserify babel

请考虑以下两个文件：

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'

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

10 个答案:

答案 0 :(得分：13)

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

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

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

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

Source

答案 1 :(得分：11)

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

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

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

从这里引出的答案：ignore eslint error: 'import' and 'export' may only appear at the top level

答案 2 :(得分：3)

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

全局

  1. npm install -g browserify

    2. 在你的app目录中：

    1. npm install browserify --save-dev
    2. npm install babelify --save-dev
    3. npm install babel-preset-es2015 --save-dev
    4. npm install babel-preset-stage-0 --save-dev

    5. npm install babel-preset-react --save-dev 然后创建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文件。

答案 3 :(得分：1)

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

因此，我更新了程序包，然后使用global选项将babelify作为全局转换运行，不包括所有节点模块，但我感兴趣的是babelify回购页面上指示的模块：

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

希望有帮助。

答案 4 :(得分：0)

由于某种原因，无论是es2015还是env礼物，babelify 8.0.0都不适合我。但是，as of 2018-07-10的esmify插件mattdesl对我有用。我的测试用例是从spin.js导出Spinner作为全局窗口。我的示例仓库是here;关键细节如下。

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。

答案 5 :(得分：0)

如果您想通过npm中的import或require方法对客户端使用任何东西，只需执行以下步骤

  1. 运行 npm install browserify babelify @babel/preset-env @babel/preset-react @babel/core es2015 --save-dev安装所需的预设
  2. 将此代码添加到您的package.json 
"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ] 
}
  1. 创建要转换为客户端js的文件。 ex: dom_front.js 
const ReactDOM  = require('react-dom')
import React, {Component} from 'react' 
export {Component,React,ReactDOM};

这是模块和要求文件的混合导出数据。

注意：请不要忘记安装react-dom和react

  1. 使用browserify api-创建js文件，例如browserifyload.js和资产文件夹
const browserify = require("browserify")
const fs = require('fs')
browserify("./dom_front.js", {
  debug : true,
  standalone: "util"
}).transform(['babelify', { compact: false }], {
  global: true,                                  
  ignore: [/\/node_modules\/(?!@vizuaalog\/)/],     
  presets: [ 
    "@babel/preset-env",
    "@babel/preset-react"] 
  }).bundle().on('error', function (err) {
    console.log(err);  
  }).pipe(fs.createWriteStream('assets/mynpmmodule.js')).on('end', function(){
    console.log( 'finished writing the browserify file' );
  });
  1. 创建文件夹结构
app
--dom_front.js
--browserifyload.js
--assets(folder)
  1. 运行node browserifyload.js或运行browserify dom_front.js --transform babelify --standalone util > ./assets/mynpmmodule.js
  2. 检查资产文件夹，它现在在其中创建名为mynpmmodule.js的文件
  3. 将此文件添加到您的HTML <script src="assets/mynpmmodule.js"></script>
  4. 现在您可以使用上面util所述的独立密钥来使用导出的npm模块/类或所需文件，例如
<script>
  const Component = util.Component;
  console.log(Component);
  const ReactDOM = util.ReactDOM;
</script>

答案 6 :(得分：0)

我尝试了上面所有的答案，但没有一个对我有用，我什至尝试使用 gulp-include / require语法，它们既不是解决方案，也不足以我的要求。

这是我的要求。

  1. 将所有模块/文件捆绑到一个
  2. 保留所有评论/ JSDocs
  3. 保留所有类型（例如const example = (parameter: string) => {}）
  4. 使用导入/导出语法

列出要求的原因是因为我们需要一个存储库来将共享功能，共享配置，共享类型和共享常量存储为npm包（随URL一起安装）。在这种情况下，我们已经知道我们的项目都使用TypeScript，因此无需将共享模块编译为.js，并且还需要像其他软件包一样保留所有描述（JSDoc和Type确实有帮助）

到目前为止，我能做的最好的就是将browserify与tsify一起使用。我不小心从here找到了解决方法。

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

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

答案 7 :(得分：-1)

这个错误可能是因为不包括在gulp任务中编译typescript的tsify插件。

例如

    var tsify = require('tsify');

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

请参阅此处的安装和使用方法： https://www.npmjs.com/package/tsify

答案 8 :(得分：-1)

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

答案 9 :(得分：-2)

就我而言，我使用的是 export 而不是 exports 。

将导出更改为导出。

相关问题
最新问题