创建多个 Webpack 构建并处理可选依赖项答案

【问题标题】：Creating multiple Webpack builds and handling optional dependecies创建多个 Webpack 构建并处理可选依赖项
【发布时间】：2018-04-21 09:27:18
【问题描述】：

我正在使用 webpack 创建我正在创建的库的几个不同版本：

Kitchen sink build - 包含已内置的所有全局 deps，可用作页面上包含的简单脚本。
模块构建 - 仅包含库代码，不包含任何依赖项。实施者必须确保这些部门自己可用。

我有 2 个 webpack 配置，每个构建一个。 webpack 配置文件之间的主要区别是最小构建使用如下externals 配置，它省略了构建中的 deps。

{
  lodash: {
    commonjs: 'lodash',
    commonjs2: 'lodash',
    amd: 'lodash',
    root: '_'
  },
  rsvp: {
    commonjs: 'rsvp',
    commonjs2: 'rsvp',
    amd: 'rsvp',
    root: 'RSVP'
  }
}

如果我想在我的厨房水槽构建中包含所有 lodash，这非常有用。但考虑到 lodash 有点大，我只使用 lodash 中的〜 3 个函数，我想转移到一个自定义版本，其中只包含我用来最小化文件大小的函数。我成功地创建了 lodash 的自定义版本，它与我的厨房水槽版本一样工作。

我遇到的问题是最小构建现在包括自定义 lodash 构建，而不是寻找全局实例。

我认为问题源于将externals 映射到我在使用本地构建的 lodash 时更改为的 lodash 导入。

// My original import that correctly removed lodash from minimal build
var _ = require('lodash')

// The new import I'm using to use my custom build
var _ = require('./utilities/lodash.custom')

这里是我用来创建 lodash 的构建命令：

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js

有人知道如何正确地使用外部组件来构建自定义 lodash 吗？

【问题讨论】：

标签： javascript webpack lodash

【解决方案1】：

我在对 webpack 中的不同配置选项进行了更多处理之后才发现了这一点。如果其他人遇到同样的问题，我会回答我自己的问题。

我能够更新 webpack 配置，为我的自定义 lodash 构建创建 lodash 的别名，因此当我导入 lodash 时，它实际上导入了我的本地构建，而不是从 NPM 下载的内容。

我的 lodash 的 index.js 文件导入保持不变，就好像我从 NPM 导入一样：

var _ = require('lodash');

然后，我创建了一个 lodash 的自定义构建，其中仅包含我的代码所需的函数。这将在./utilites/lodash.custom.js 文件下生成一个静态构建。

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js

然后在我的 webpack.conf.js 文件中，我添加了一个 resolve 部分，将 lodash 命名空间指向我的本地 lodash 构建。

kitchen-sink-build.webpack.config.js

{
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    library: 'CorsClient',
    libraryTarget: 'umd',
    filename: 'CorsClient.js'
  },
  target: 'web',
  plugins: [],
  resolve: {
    alias: {
      'lodash': './utilities/lodash.custom'
    }
  }
}

这将生成一个输出文件，该文件使用我的自定义 lodash 构建并将其作为依赖项包含在内。这个厨房水槽构建将能够在任何网站上用作独立脚本。

通过在webpack.conf.js 文件中添加另一个块，我可以告诉 webpack 不要包含 lodash，但希望它已经在全局范围内可用：

module-build.webpack.config.js：

{
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    library: 'CorsClient',
    libraryTarget: 'umd',
    filename: 'CorsClient.js'
  },
  target: 'web',
  plugins: [],
  resolve: {
    alias: {
      'lodash': './utilities/lodash.custom'
    }
  },
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_'
    }
  }
}

此构建将省略 lodash 作为依赖项，并依赖实施者手动导入 lodash。这使得它非常适合作为依赖项导入到另一个已经具有完整 lodash 或自定义 lodash 构建（至少包含相同的 lodash 函数）的项目中。

【讨论】：