Browserify - ParseError: 'import' 和 'export' 可能只与 'sourceType: 模块一起出现

Question

In my gulpfile I have

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"}));


})

and in my app.js I am trying to import but get the errror

import SimpleBreakpoints from 'simple-breakpoints'

Any idea how to get rid of the error and use the import syntax?

Edit: the .babelrc

{
    "presets": ["es2015"],

}

Answer 1

In your configuration, you pipe js/main.js to Babel, so that's the only file that will be transpiled. When Browserify requires app.js , it will seen ES6 content and will effect the error you are seeing.

You could use Babelify to solve the problem. It's a Browserify transform that will transpile the source that Browserify receives.

To install it, run this command:

npm install babelify --save-dev

And to configure it, change your task to:

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" }));
})

Answer 2

Browserify in Gulp

For those who work with gulp and want to transpile ES6 to ES5 with browserify , you might stumble upon gulp-browserify plug-in. Warning as it is from version 0.5.1 gulp-browserify is no longer suported!!! . Consequences, of this action and transpiling with gulp-browserify will result with source code that might produce errors such as the one in question or similar to these: Uncaught ReferenceError: require is not defined or Uncaught SyntaxError: Unexpected identifier next to your import statements eg import * from './modules/bar.es6.js';

Solution

Althoutg gulp-browserify recomends to "checkout the recipes by gulp team for reference on using browserify with gulp" . I found this advice to no avail. As it is now (2st July 2019) solution that worked for me was to replace gulp-browserify with gulp-bro@1.0.3 plug-in. This successfully, transpired ES6 to ES5 (as it is now) - It might change in future since support for JavaSript libraries decays with time of it appearance.

Assumption: To reproduce this solution you should have installed docker . Beside that you should be familiar with babel and babelify .

Source Code

This solution was successfully reproduced in docker environment, run node:11.7.0-alpine image.

Project Structure

/src                          <- directory
/src/app/foo.es6.js
/src/app/modules/bar.es6.js
/src/app/dist                 <- directory
/src/app/dist/app.es5.js
/src/gulpfile.js
/src/.babelrc
/src/package.json
/src/node_modules             <- directory

Step 1: Run docker image

$ docker run --rm -it --name bro_demo node:11.7.0-alpine ash

Step 2: Create directories and source files

$ mkdir -p /src/dist
$ mkdir -p /src/app/modules/
$ touch /src/app/foo.es6.js
$ touch /src/app/modules/bar.es6.js
$ touch /src/gulpfile.js
$ touch /src/.babelrc
$ touch /src/package.json
$ cd /src/

$ apk add vim

.babelrc

{
  "presets": ["@babel/preset-env"]
}

package.json

{
  "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"
  }
}

bar.es6.js

"use strict"

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

export default Bar;

foo.es6.js

"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()

gulpfile.js

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;

Step 3 - Transpile ES6 to ES5

$ npm install
$ npm install -g gulp@4.0.2

$ gulp transpile
[09:30:30] Using gulpfile /src/gulpfile.js
[09:30:30] Starting 'transpile'...
[09:30:30] Finished 'transpile' after 9.33 ms

$ node dist/app.es5.js
Foo time!
Bar time!

Source code after transpilation app.es5.js

(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]);

Answer 3

Simply switching to webpack instead of browserify fixed the issue for me.

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