Question

我的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文件中。

我该如何解决？

谢谢

Answer 1

由于听起来您正在使用某种异乎寻常的方式在应用程序中加载JS（而不是诸如require.ensure之类的方法），所以最简单的选择可能是在构建各个模块时使用Webpack externals 。您的主脚本/页面将必须确保jQuery在全局范围内公开（例如在window.$或window.jQuery下）。然后，为您的webpack配置添加如下内容：

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

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

Gulp Webpack只加载一次jQuery

1 个答案: