ES6 - 使用babel / traceur与jQuery插件 [英] ES6 - Using babel/traceur with jQuery plugins
问题描述
例如，我可能会有这样一个类：
import'from'jquery';
从somePlugin导入somePlugin;
class myClass {
constructor（options）{
this.defaults = {
$ body：$（'body'）
};
this.options = $ .extend（this.defaults，options）;
$ body.somePlugin（）;
}
}
如果我使用Babelify，我可以让它工作，我宁愿找到一种我不必依靠另一个过程的方式。当我只是使用Babel，我在控制台中收到这个错误： Uncaught ReferenceError：require没有定义。
我检查了代码，看起来它将导入转为需求。
有没有办法，或者我必须坚持使用Browserify（Babelify）来编译JavaScript？
编辑：我目前正在使用 browserify-shim 使jQuery插件也可以工作。 p>
EDIT2：没有这不是关于RequireJS - 我试图删除使用Babify使用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 - 删除全部--minify --insert app.min.js -o dist / index.html'
]））;
HTML：
code>< HEAD>
< title> ES6< / title>
< script src =jspm_packages / system.js>< / script>
< script src =config.js>< / script>
< script>
System.import（'app / main'）;
< / script>
< / head>
我创建的repo 这里也将向您展示如何做到
I want to be able to write ES6 with jQuery plugins and compile the code down to ES5 using Gulp Babel, without having to use Browserify to make them work.
For example, I may have a class like this:
import $ from 'jquery';
import somePlugin from 'somePlugin';
class myClass {
constructor(options) {
this.defaults = {
$body: $('body')
};
this.options = $.extend(this.defaults, options);
$body.somePlugin();
}
}
I can get this to work if I use Babelify but I'd prefer to find a way where I do not have to depend on another process. When I just use Babel, I get this error in the console: Uncaught ReferenceError: require is not defined.
I checked the code and it looks like it's turning the imports into requires.
Is there a way around this or will I have to stick with using Browserify (Babelify) to compile the JavaScript?
EDIT: I am currently using browserify-shim to make the jQuery plugins work too
EDIT2: No this is not about RequireJS - I'm trying to remove the use of Browserify with Babel
Answering my own question here. I did some digging and it looks like the best way of dealing with this issue at the moment is using jspm with the 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>
The repo I created here will also show you how to do it
这篇关于ES6 - 使用babel / traceur与jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
