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과 같은 번들러가 필요합니다. 바벨은 ES6 코드를 ES5 (네이티브 JS)로만 컴파일 할 수 있습니다.

웹팩 및 Browserify 모두 꿀꺽위한 조리법을 만들었습니다 :이 도움이

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

희망을.