从 gulp、wiredep、gulp-inject 和 globs 迁移到 webpack 和 ES6 模块

Question

我有一个遗留项目，想将它从 gulp 移动到 webpack。项目使用带有 gulp-inject 插件的 wiredep，因此所有代码都依赖于全局变量并且没有导入 CommonJS/AMD/ES6 模块。但据我所知，webpack 通过基于模块导入解析依赖关系图来构建包。是否可以将这样的项目迁移到 webpack，然后逐步更新代码以使用 ES6 导入并删除全局变量？ webpack有没有类似wiredep的东西？您有什么建议可以逐步将项目迁移到 ES6 模块？

Answer 1

没有使用 wiredep 或 gulp-inject 插件的经验，除了阅读这两个库的功能外，以下内容可能会帮助您了解迁移以及可以使用哪些插件.

Webpack 暴露加载器

expose loader webpack plugin 允许您将库添加到全局命名空间。通过这种方式，您代码中需要它的其他部分将能够访问它。

Gulp 注入 Webpack 插件

我会让the docs自己说话。

Gulp has an excellect HTML composer called Gulp Inject. It has a lot of powerful features.

If you have existing projects that you are migrating to Webpack it is desirable for these features to work immediately, with the Webpack CLI.

This plugin wraps Gulp Inject so that you can use it without running Gulp. It has a dependency on the Vinyl File System used in Gulp but not on Gulp itself.

通过组合这两个插件，您应该能够迁移到 Webpack，而无需调整应用的整个结构。

希望对您有所帮助。

Answer 2

最后我得到了 webpack-concat-plugin，它允许您将来自 bower_component（不仅）库的 js 依赖项连接到一个包中，然后可选地缩小它并注入到 index.html（使用 html-webpack-plugin），因此它允许我创建与使用 gulp 的项目非常相似的设置。唯一的事情是，现在我应该明确指定我希望在捆绑包中包含的 bower_components 中的所有 js 文件，而 wiredep 会自动执行它。这个插件解决了整个问题：

new ConcatPlugin({
  uglify: true, // actually it is just a minifier
  sourceMap: false,
  name: 'bower.bundle',
  outputPath: 'vendor',
  fileName: '[name].js',
  filesToConcat: [
    "@bower_components/jquery/jquery.min.js",
    ...
  ],
  attributes: {
    async: false // file order is preserved same as in 'filesToConcat'
  }

从 gulp、wiredep、gulp-inject 和 globs 迁移到 webpack 和 ES6 模块

migration from gulp, wiredep, gulp-inject and globs to webpack and ES6 modules

gulp

gulp-inject

webpack

wiredep