Javascript 创建多个网页包生成和处理可选依赖项_Javascript_Webpack_Lodash

Javascript 创建多个网页包生成和处理可选依赖项

javascript webpack

Javascript 创建多个网页包生成和处理可选依赖项,javascript,webpack,lodash,Javascript,Webpack,Lodash,我正在使用webpack创建我正在创建的库的几个不同版本：厨房水槽构建-包含所有内置的全局DEP，可以用作页面上包含的简单脚本模块构建-仅包含库代码，不包含DEP。实施者必须确保DEP本身可用我有2个网页包配置，每个版本一个。webpack配置文件之间的主要区别在于，最小构建使用了如下所示的externals配置，这在构建中省略了DEP { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lo

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

厨房水槽构建-包含所有内置的全局DEP，可以用作页面上包含的简单脚本
模块构建-仅包含库代码，不包含DEP。实施者必须确保DEP本身可用

我有2个网页包配置，每个版本一个。webpack配置文件之间的主要区别在于，最小构建使用了如下所示的

externals

配置，这在构建中省略了DEP

{
  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的build命令：

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

有人知道如何在定制lodash版本中正确使用externals吗？

我在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构建

厨房水槽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，而是希望它已经在全局范围内可用：

模块构建.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函数）的项目中。

我在webpack中稍微处理了一下不同的配置选项后，发现了这一点。我在回答我自己的问题，如果其他人在这个问题上遇到同样的问题