Gulp Browserify-ParseError:&x27；导入&x27；和'；出口'；只能与'；源类型：模块

在我的肚子里有

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var babel = require("gulp-babel");
var rename = require('gulp-rename');
var source =  require('vinyl-source-stream');
var browserify = require('gulp-browserify');
var notify = require("gulp-notify");


gulp.task('js', function () {
    gulp.src('js/main.js')
       .pipe(babel())
        .pipe(browserify())
         .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
         .pipe(notify({title: "Success", message: "Well Done!", sound: "Glass"}));


})

在我的app.js中，我尝试导入，但得到了错误

import SimpleBreakpoints from 'simple-breakpoints'

知道如何消除错误并使用导入语法吗

编辑：babelrc

{
    "presets": ["es2015"],

}

---

在您的配置中，将

js/main.js

传输到Babel，因此这是将传输的唯一文件。当Browserify需要

app.js

时，它将看到ES6内容，并将影响您看到的错误

你可以用Babelify来解决这个问题。这是一个Browserify转换，它将传输Browserify接收的源

要安装它，请运行以下命令：

npm install babelify --save-dev

要对其进行配置，请将任务更改为：

gulp.task('js', function () {
    gulp.src('js/main.js')
        .pipe(browserify({ transform: ['babelify'] }))
        .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
        .pipe(notify({ title: "Success", message: "Well Done!", sound: "Glass" }));
})

狼吞虎咽 对于那些使用

gulp

并希望使用

browserify

将ES6传输到ES5的人，您可能会偶然发现插件警告从0.5.1版开始

不再支持吞咽式浏览

。后果，如果执行此操作并使用

gulp browserify

进行传输，则源代码可能会产生问题或类似错误：未捕获引用错误：未定义require或未捕获语法错误：在导入语句旁边出现意外标识符e、 g.

import*from./modules/bar.es6.js'

解决方案
尽管gulp browserify

建议“检查gulp团队的食谱，以供在使用browserify和gulp时参考”。我觉得这个建议没有用。现在（2019年7月2日），对我有效的解决方案是用插件替换

gulpbrowserify

。这成功地将ES6传输到了ES5（现在的情况），将来可能会发生变化，因为对JavaSript库的支持会随着时间的推移而衰减

假设：要复制此解决方案，您应该已安装。除此之外，你应该熟悉和

源代码 此解决方案已在docker环境中成功复制，运行图像

项目结构

---

/src简单地切换到webpack而不是browserify为我解决了这个问题

var webpack = require('webpack-stream')

gulp.task('default', function () {
  return gulp.src('src/source.js')
    .pipe(webpack({
      output: {
        filename: 'app.js'
      }
    }))
    .pipe(gulp.dest('dist/app.js'))
})

你能显示你的
.babelrc
文件吗？更新了帖子。可能是相关的。我使用了
esmify
，它很有效。非常感谢所以这是唯一一个将被传输的文件，是我丢失的信息。@cartant您介意添加完整的gulpfile吗？它与食谱完全不同，我似乎无法在你发布它时运行它（你不能在browserify之后使用管道…）@GeorgeKatsanos在回答这个问题时，我只注意标题中的错误-如果它收到ES6模块，这就是错误browserify效果。答案只是为了解决巴别塔/巴别利菲问题；我没有太多注意其他方面。（与构建相关的问题往往过于复杂，无法重现。）你一定要遵循你提到的方法，如果你有问题，就发布一个问题。希望你能成功。
{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babelify": "^10.0.0",
    "gulp": "^4.0.2",
    "gulp-bro": "^1.0.3",
    "gulp-rename": "^1.2.2"
  }
}

"use strict"

class Bar {
  constructor(grammar) {
    console.log('Bar time!');
  }
}

export default Bar;

"use strict"

import Bar from './modules/bar.es6.js';

class Foo {
  constructor(grammar) {
    console.log('Foo time!');
  }
}

var foo = new Foo()
var bar = new Bar()

const bro = require('gulp-bro');
const gulp = require('gulp');
const rename = require('gulp-rename');
const babelify = require('babelify');

function transpileResources(callback) {
  gulp.src(['./app/foo.es6.js'])
    .pipe(bro({transform: [babelify.configure({ presets: ['@babel/preset-env'] })] }))
    .pipe(rename('app.es5.js'))
    .pipe(gulp.dest('./dist/'));

  callback();
}

exports.transpile = transpileResources;

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";

var _barEs = _interopRequireDefault(require("./modules/bar.es6.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo(grammar) {
  _classCallCheck(this, Foo);

  console.log('Foo time!');
};

var foo = new Foo();
var bar = new _barEs["default"]();

},{"./modules/bar.es6.js":2}],2:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Bar = function Bar(grammar) {
  _classCallCheck(this, Bar);

  console.log('Bar time!');
};

var _default = Bar;
exports["default"] = _default;

},{}]},{},[1]);

var webpack = require('webpack-stream')

gulp.task('default', function () {
  return gulp.src('src/source.js')
    .pipe(webpack({
      output: {
        filename: 'app.js'
      }
    }))
    .pipe(gulp.dest('dist/app.js'))
})