web-dev-qa-db-ja.com

Browserify-ParseError： 'import'および 'export'は 'sourceType：moduleでのみ表示される場合があります

私のgulpfileには

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"],

}
gulpecmascript-6browserifybabel
9
LeBlaireau

構成では、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" }));
})
6
cartant

Browserifyの代わりにwebpackに切り替えるだけで問題が解決しました。

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

GulpのBrowserify

gulpで作業していて、browserifyを使用してES6をES5にトランスパイルしたい場合は、 gulp-browserify プラグインに遭遇する可能性があります。 警告バージョンからの変更.5.1gulp-browserifyサポートされなくなりました!!!。結果として、このアクションとgulp-browserifyでのトランスパイルにより、問題のエラーまたは類似のエラーなどのソースコードが生成されます。ncaught ReferenceError：require is not definedまたは- ncaught SyntaxError：Unexpected identifier隣にimportステートメントがあるimport * from './modules/bar.es6.js';

解決

Althoutg gulp-browserifyは、-"gulpチームでbrowserifyを使用する際の参考として、gulpチームのレシピをチェックアウト"することをお勧めします。このアドバイスは役に立たないことがわかりました。現在（2019年7月2日）なので、私にとってうまくいった解決策は、gulp-browserifyを [email protected]. プラグインに置き換えることでした。これは正常にES6からES5に移行しました（現在の状態）-JavaSriptライブラリのサポートはその出現の時間とともに減衰するため、将来変更される可能性があります。

前提：このソリューションを再現するには、インストールが必要です docker 。それに加えて、 babel と babelify に精通している必要があります。

ソースコード

このソリューションは、Docker環境で正常に再現されました。 node：11.7.0-Alpine imageを実行します。

プロジェクトの構造

/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

手順1：Dockerイメージを実行する

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

手順2：ディレクトリとソースファイルを作成する

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

ステップ3-ES6を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!

変換後のソースコード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