導入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

您可以使用Webpack的externals設置來阻止它將某些軟件包包含在您的捆綁軟件中。