我希望能够使用jQuery插件编写ES6,并使用Gulp Babel将代码编译为ES5,而不必使用Browserify使其正常工作。
例如,我可能有一个这样的课:
import $ from 'jquery';
import somePlugin from 'somePlugin';
class myClass {
constructor(options) {
this.defaults = {
$body: $('body')
};
this.options = $.extend(this.defaults, options);
$body.somePlugin();
}
}
如果使用Babelify,我可以使它正常工作,但我更希望找到一种无需依赖其他流程的方法。当我仅使用Babel时,会在控制台中收到此错误:Uncaught ReferenceError: require is not defined
。我检查了代码,看起来好像将导入变成了需求。
有没有解决的办法,还是我必须坚持使用Browserify(Babelify)来编译JavaScript?
编辑:我目前正在使用browserify-shim使jQuery插件也工作
EDIT2:不,这不是关于RequireJS的问题-我正在尝试删除与Babel一起使用Browserify的方法
在这里回答我自己的问题。我做了一些挖掘,目前看来解决此问题的最佳方法是将jspm与es6-module-loader一起使用。
Gulpfile:
var gulp = require('gulp');
var del = require('del');
var shell = require('gulp-shell');
gulp.task('clean', function(cb) {
del('dist', cb);
});
gulp.task('default', ['clean'], shell.task([
'jspm bundle-sfx app/main -o dist/app.js',
'./node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js',
'./node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html'
]));
HTML:
<head>
<title>ES6</title>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app/main');
</script>
</head>
我在这里创建的仓库也将向您展示如何做
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句