Gulp Webpack загрузить JQuery только один раз

Question

У меня есть две задачи Gulp в моем gulpfile.js. Используется для сайта.

Первый компилирует с веб-пакетом основной файл js, используемый на всех страницах сайта (в основном визуальные), и объединяет его в один файл.

gulp.task('scripts', function(callback) {
let firstBuildReady = false;

function done(err, stats) {
    firstBuildReady = true;
    if (err) { // hard error, see https://webpack.github.io/docs/node.js-api.html#error-handling
        return;  // emit('error', err) in webpack-stream
    }
    gulplog[stats.hasErrors() ? 'error' : 'info'](stats.toString({
        colors: true
    }));
}

let options = {
    output: {
        publicPath: '/js/',
        filename: isDevelopment ? '[name].js' : '[name]-[chunkhash:10].js'
    },
    watch:   isDevelopment,
    devtool: isDevelopment ? 'cheap-module-inline-source-map' : false,
    module:  {
        loaders: [{
            test: /\.js$/,
            //include: path.join(__dirname, "app/src/scripts/modules"),
            loader: 'babel-loader',
            query: {
               presets: ["env"]
            }
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ]
};

if (!isDevelopment) {
    options.plugins.push(new AssetsPlugin({
        filename: 'scripts.json',
        path:     __dirname + '/app/manifest',
        processOutput(assets) {
            for (let key in assets) {
                assets[key + '.js'] = assets[key].js.slice(options.output.publicPath.length);
                delete assets[key];
            }
            return JSON.stringify(assets);
        }
    }));
}

return gulp.src(jsSRC)
    .pipe(plumber({
        errorHandler: notify.onError(err => ({
            title:   'Scripts',
            message: err.message
        }))
    }))
    .pipe(named(function(file){
        return 'app'
    }))
    .pipe(webpackStream(options, null, done))
    .pipe(gulpIf(!isDevelopment, uglify()))
    .pipe(gulp.dest(jsDIST))
    .on('data', function() {
        if (firstBuildReady) {
            callback();
        }
    });

});

Второй компилирует каждый js-модуль в один файл - некоторые js-скрипты, используемые на специальных страницах. Эти сценарии включены только там, где это необходимо.

gulp.task('webpack', function(callback) {
let firstBuildReady = false;

function done(err, stats) {
    firstBuildReady = true;
    if (err) {
        return;
    }
    gulplog[stats.hasErrors() ? 'error' : 'info'](stats.toString({
        colors: true
    }));
}

let options = {
    output: {
        publicPath: '/js/',
        filename: isDevelopment ? '[name].js' : '[name]-[chunkhash:10].js'
    },
    watch:   isDevelopment,
    devtool: isDevelopment ? 'cheap-module-inline-source-map' : false,
    module:  {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
               presets: ["env"]
            }
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

if (!isDevelopment) {
    options.plugins.push(new AssetsPlugin({
        filename: 'webpack.json',
        path:     __dirname + '/app/manifest',
        processOutput(assets) {
            for (let key in assets) {
                assets[key + '.js'] = assets[key].js.slice(options.output.publicPath.length);
                delete assets[key];
            }
            return JSON.stringify(assets);
        }
    }));
}

return gulp.src('app/src/scripts/modules/*.js')
    .pipe(plumber({
        errorHandler: notify.onError(err => ({
            title:   'Webpack',
            message: err.message
        }))
    }))
    .pipe(named())
    .pipe(webpackStream(options, null, done))
    .pipe(gulpIf(!isDevelopment, uglify()))
    .pipe(gulp.dest(jsDIST))
    .on('data', function() {
        if (firstBuildReady) {
            callback();
        }
    });

}); * +1011 *

Но я должен включить Jquery в каждый файл для второй задачи, иначе он не скомпилируется. Но Jquery включен в основной файл app.js.

Как я могу решить это?

Спасибо

Answer 1

Так как кажется, что вы используете несколько экзотический способ загрузки JS в свое приложение (вместо подходов, подобных require.ensure), самым простым вариантом может быть использование Внешние элементы веб-пакета при создании вашего индивидуального приложения. модули. Ваш основной сценарий / страница должны обеспечить глобальный доступ к jQuery (например, под window.$ или window.jQuery). Затем, для вашей конфигурации веб-пакета, включите что-то вроде этого:

{
  // ...
  externals: {
    jquery: '$'
  }
}

Это заменит $ для всех вызовов require('jquery') вместо включения jquery в каждый пакет JS.