Gulpを使用したES6インポートモジュール

Question

ES6モジュールをファイルにインポートし、Gulpを実行してファイルを連結して縮小しようとしています。 ReferenceError：requireはall.js（transpiled）の行番号3で定義されていません。です。 gulp-babelを使用してコードを翻訳しました。

私のjsファイルは、次のとおりです。

cart.js：

class Cart{ 
    constructor(){ 
    this.cart = []; 
    this.items = items = [{ 
     id: 1, 
     name: 'Dove Soap', 
     price: 39.99 
    },{ 
     id: 2, 
     name: 'Axe Deo', 
     price: 99.99 
    }]; 
    } 


    getItems(){ 
    return this.items; 
    } 


} 

export {Cart}; 

app.js：

import {Cart} from 'cart.js'; 

let cart = new Cart(); 

console.log(cart.getItems()); 

gulpfile.js：

"use strict"; 

let gulp = require('gulp'); 
let jshint = require('gulp-jshint'); 
let concat = require('gulp-concat'); 
let uglify = require('gulp-uglify'); 
let rename = require('gulp-rename'); 
let babel = require('gulp-babel'); 


// Lint Task 
gulp.task('lint', function() { 
    return gulp.src('js/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('default')); 
}); 


// Concatenate & Minify JS 
gulp.task('scripts', function() { 
    return gulp.src('js/*.js') 
     .pipe(babel({ 
      presets: ['env'] 
     })) 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('dist')) 
     .pipe(rename('all.min.js')) 
     .pipe(uglify().on('error', function(e){ 
      console.dir(e); 
     })) 
     .pipe(gulp.dest('dist/js')); 
}); 

// Default Task 
gulp.task('default', ['lint','scripts']); 

app.js（transpiled）：私はスクリーンキャストには、この最大

リンクをクリアコード学校からカルロス・ソウザでスクリーンキャストに出くわした

'use strict'; 

var _cart = require('cart.js'); //Uncaught ReferenceError: require is not defined 

var cart = new _cart.Cart(); 

console.log(cart.getItems()); 
'use strict'; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 

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

var Cart = function() { 
    function Cart() { 
    _classCallCheck(this, Cart); 

    this.cart = []; 
    this.items = items = [{ 
     id: 1, 
     name: 'Dove Soap', 
     price: 39.99 
    }, { 
     id: 2, 
     name: 'Axe Deo', 
     price: 99.99 
    }]; 
    } 

    _createClass(Cart, [{ 
    key: 'getItems', 
    value: function getItems() { 
     return this.items; 
    } 
    }]); 

    return Cart; 
}();exports.Cart = Cart; 

Answer 1

まあ、いくつかの研究の後：ES2015 With Babel and Gulp

Answer 2

ES6のインポートを使用するには、WebpackまたはBrowserifyのようなバンドラが必要です。 BabelはES6コードをES5（ネイティブJS）にコンパイルすることしかできません。

のWebPACKとBrowserifyの両方が一気のためのレシピを作った。このことができます

• http://webpack.github.io/docs/usage-with-gulp.html
• https://github.com/gulpjs/gulp/tree/master/docs/recipes

希望を。