请考虑以下两个文件：
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'
对不起什么？这个错误是什么？我究竟做错了什么？
较旧版本的Babel带有开箱即用的东西。较新的版本要求您安装您的设置所需的任何插件。首先，您需要安装ES2015预设。
npm install babel-preset-es2015 --save-dev
接下来，您需要告诉babelify使用您安装的预设。
return browserify({ ... })
.transform(babelify.configure({
presets: ["es2015"]
}))
...
ESLint本身并不支持这一点，因为这违反了规范。但是如果你使用babel-eslint解析器然后在你的eslint配置文件中你可以这样做：
{
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
}
}Doc ref：https://github.com/babel/babel-eslint#configuration
答案来自这里：ignore eslint error: 'import' and 'export' may only appear at the top level
为了正确编译es2015-react代码，您应该安装一些节点模块：
全球
npm install -g browserify
在您的app目录中：
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文件。
出于某种原因，babelify 8.0.0对我来说不适用于es2015或env礼物。然而，as of 2018-07-10，esmify的mattdesl插件确实对我有用。我的测试案例是从Spinner出口spin.js作为全球窗口。我的例子是here;关键细节如下。
main.jsimport {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><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。
我遇到了同样的错误，试图从node_modules导入一个以ES6风格导出的模块。没有任何建议在SO上为我解决。然后我在babelify repo找到了FAQ部分。根据那里的见解，出现错误，因为node_modules中的模块默认情况下没有被转换，并且由common.js样式模块驱动的节点不能理解像export default ModuleName这样的ES6声明。
所以，我更新了我的软件包，然后使用global选项将babelify作为一个全局变换运行，排除了所有节点模块，但是我感兴趣的那个如babelify repo页面所示：
...
browserify.transform("babelify",
{
presets: ["@babel/preset-env"],
sourceMaps: true,
global: true,
ignore: [/\/node_modules\/(?!your module folder\/)/]
}).bundle()
...
希望能帮助到你。
在.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的文档指南。
这个错误可能是因为不包括tsify插件来编译gulp任务中的typescript。
例
var tsify = require('tsify');
return browserify({ ... })
.plugin(tsify)
.transform(babelify.configure({
presets: ["es2015"]
}))
...
请参阅此处的安装和使用：https://www.npmjs.com/package/tsify
在我的情况下，我使用出口而不是出口。
改变出口到出口。