我试图将ES6模块导入到一个文件中,并运行Gulp来连接和缩小该文件。我遇到了ReferenceError:js(transpiled)第3行。我已经用gulp-babel把代码翻译了。
我的js文件是:
购物车.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};
应用程序.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']);
应用程序.js(已转换):
'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;
3条答案
按热度按时间uqzxnwby1#
你需要一个捆绑器,比如Webpack或Browserify来使用ES6导入。Babel只能将ES6代码编译成ES5(原生JS)。
Webpack和Browserify都为吞咽制作了食谱:
希望这对你有帮助。
bf1o4zei2#
Rollup是处理ES6模块的一个很好的捆绑器。它内置了原生的ES6模块支持,所以不需要像Browserify那样使用Babel。
以下是使用Rollup的Gulp 4配置:
bihw5rsg3#
如果以上解决方案不适合您,请尝试gulp-include。
它使用类似于sprocket或snocket的指令。指令是文件中的注解,gulp-include将其识别为命令。
用法