ES6 - 使用帶有jQuery插件的babel / traceur

Question

我希望能夠使用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插件工作

編輯2：不，這不是關於RequireJS - 我試圖刪除使用Browserify與Babel

Answer 1

在這里回答我自己的問題。 我做了一些挖掘，看起來目前處理這個問題的最佳方法是使用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>

我在這里創建的回購也將向您展示如何做到這一點

ES6 - 使用帶有jQuery插件的babel / traceur

問題描述

1 個解決方案

解決方案1
2 已采納 2015-05-28 19:42:29

ES6 - 使用帶有jQuery插件的babel / traceur

問題描述

1 個解決方案

解決方案1 2 已采納 2015-05-28 19:42:29

解決方案1
2 已采納 2015-05-28 19:42:29