Gulp webpack 只加载 jquery 一次答案

【问题标题】：Gulp webpack load jquery only onceGulp webpack 只加载 jquery 一次
【发布时间】：2018-09-02 18:40:06
【问题描述】：

我的 gulpfile.js 中有两个 Gulp 任务。它用于网站。

第一个用 webpack 编译主 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();
        }
    });

});

但我必须在第二个任务的每个文件中包含 Jquery，否则它不会被编译。但是 Jquery 包含在主 app.js 文件中。

我该如何解决？

谢谢

【问题讨论】：

你想如何在运行时加载这些 webpack 包？我很好奇你为什么不使用典型的 Webpack 入口点和代码拆分方法。
我为我的 cms 编写了一个插件，它只使用清单文件将所需的脚本插入到 html 中。

标签： javascript jquery webpack gulp

【解决方案1】：

因为听起来您在应用程序中使用了一种有点奇怪的方式来加载 JS（而不是像 require.ensure 这样的方法），所以您最简单的选择可能是在构建您的单个模块时使用 Webpack externals。您的主脚本/页面必须确保 jQuery 是全局公开的（例如在 window.$ 或 window.jQuery 下）。然后，对于您的 webpack 配置，包括以下内容：

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

这将用$ 替换所有require('jquery') 调用，而不是在每个JS 包中包含jquery。

【讨论】：