javascript - 导入 Bootstrap JavaScript、Webpack

Question

我试图从 Bootstrap JS 组件中仅导入折叠组件，如下所示:

import "../../../node_modules/bootstrap/js/dist/collapse";

除了 jQuery 之外一切都很好，这个文件 (collapse.js) 需要 jquery 并且它被编译到我的 main.js 文件中，如何避免这种情况？我已包含来自 CDN 的 jQuery。

这是我的 Gulp/Webpack 配置

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
};
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.entries)
    .pipe(named())
    .pipe($.sourcemaps.init())
    .pipe(webpackStream(webpackConfig, webpack2))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

更新，解决方案:

let webpackConfig = {
  externals: { jquery: 'jQuery' },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
};

Answer 1

您可以使用externals settings从 Webpack 中阻止它将某些包包含到您的包中。