web-dev-qa-db-fra.com

Browserify - ParseError: 'import' et 'export' peuvent apparaître uniquement avec 'module sourceType:

Dans mon gulpfile j'ai

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


})

et dans mon app.js j'essaie d'importer mais j'obtiens l'erreur

import SimpleBreakpoints from 'simple-breakpoints'

Une idée comment se débarrasser de l'erreur et utiliser la syntaxe d'importation?

Edit: le .babelrc

{
    "presets": ["es2015"],

}
gulpecmascript-6browserifybabel
9
LeBlaireau

Dans votre configuration, vous canalisez js/main.js à Babel, c'est donc le seul fichier qui sera transposé. Lorsque Browserify nécessite app.js, il verra le contenu ES6 et affectera l'erreur que vous voyez.

Vous pouvez utiliser Babelify pour résoudre le problème. C'est une transformation Browserify qui transpile la source reçue par Browserify.

Pour l'installer, exécutez cette commande:

npm install babelify --save-dev

Et pour le configurer, changez votre tâche en:

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

Passer simplement à webpack au lieu de browserify a résolu le problème pour moi.

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'))
})
0
Nikolay Dyankov

Browserify dans Gulp

Pour ceux qui travaillent avec gulp et veulent transposer ES6 en ES5 avec browserify, vous pourriez tomber sur gulp-browserify plug-in. Avertissement car il provient de la version 0.5.1 gulp-browserify n'est plus supporté !!! . Conséquences, de cette action et transpiling avec gulp-browserify résultera avec du code source qui pourrait produire des erreurs telles que celle en question ou similaire à celles-ci: UnCaught ReferenceError: require n'est pas défini ou Uncaught SyntaxError: identifiant inattendu à côté de vos instructions d'importation par exemple import * from './modules/bar.es6.js';

Solution

Althoutg gulp-browserify recommande de "extraire les recettes par l'équipe de gulp pour référence sur l'utilisation de browserify avec gulp" . J'ai trouvé ce conseil en vain. Comme c'est maintenant (le 2 juillet 2019) que la solution qui fonctionnait pour moi était de remplacer gulp-browserify avec [email protected]. plug-in. Cela a réussi, transpiré d'ES6 à ES5 (tel qu'il est maintenant) - Cela pourrait changer à l'avenir car la prise en charge des bibliothèques JavaSript se détériore avec le temps de son apparition.

Hypothèse: Pour reproduire cette solution, vous devez avoir installé docker . En plus de cela, vous devez être familier avec babel et babelify .

Code source

Cette solution a été reproduite avec succès dans un environnement docker, exécutez node: 11.7.0-Alpine image.

Structure du projet

/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

Étape 1: exécuter l'image Docker

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

Étape 2: créer des répertoires et des fichiers source

$ 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;

Étape 3 - Transpile ES6 vers ES5

$ npm install
$ npm install -g [email protected]

$ 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!

Code source après 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]);
0
Lukasz Dynowski