likes
comments
collection
share

webpack-node-externals中文文档

作者站长头像
站长
· 阅读数 47

轻松排除 Webpack 中的节点模块

Webpack 允许您定义外部组件 - 不应捆绑的模块。 当为后端捆绑 Webpack 时 - 您通常不想捆绑其node_modules依赖项。该库创建了一个外部函数，node_modules在 Webpack 中捆绑时会忽略该函数。 （受Webpack系列出色的后端应用程序的启发）

快速使用

npm install webpack-node-externals --save-dev 在你项目中的webpack.config.js中写入以下代码：

const nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // 为了忽略诸如path、fs等内置模块。
    externals: [nodeExternals()], // 以忽略节点\模块文件夹中的所有模块
    ...
};

就是这样。所有节点模块将不再捆绑，而是保留为require(‘module’).

注意：对于 Webpack 5，替换target: 'node’为externalsPreset对象：

// Webpack 5

const nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    externalsPresets: { node: true }, // 为了忽略诸如path、fs等内置模块。
    externals: [nodeExternals()], // 以忽略节点\模块文件夹中的所有模块
    ...
};

详细概述

描述

这个库会扫描node_modules文件夹中的所有 node_modules 名称，并构建一个外部函数，告诉 Webpack 不要捆绑这些模块或其任何子模块。

配置

这个库接受一个options对象。

options.allowlist (=[])

externals允许的数组，因此它们将包含在包中。可以接受精确的字符串 ( 'module_name')、正则表达式模式 ( /^module_name/) 或接受模块名称并返回是否应包含它的函数。 重要-如果你有完全相同的名称作为模块您的WebPack配置设置别名node_modules，你需要允许列表他们这样的WebPack会知道他们应该被捆绑在一起。

options.importType (='commonjs')

代码中需要非捆绑模块的方法。最好离开commonjs节点模块。可能是记录的选项或函数之一，callback(moduleName)它返回要作为导入类型返回的自定义代码，例如： 
options.importType = function (moduleName) {
    return 'amd ' + moduleName;
}

options.modulesDir (='node_modules')

在其中搜索节点模块的文件夹。

options.additionalModuleDirs (='[]')

用于查找节点模块的其他文件夹。

options.modulesFromFile (=false)

从package.json文件而不是node_modules文件夹中读取模块。 接受布尔值或配置对象： 
{
    modulesFromFile: true,
    /*或*/
    modulesFromFile: {
        fileName: /*要读取的package.json的路径*/,
        includeInBundle: [/*包中包含的整个节，即“devDependencies”*/],
        excludeFromBundle: [/*从包中显式排除的整个节，即仅“依赖项”*/]
    }
}

使用示例

var nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // 重要的是不要捆绑像path、fs等内置模块。
    externals: [nodeExternals({
        //这将包括捆绑包中的“jquery”和“webpack/hot/dev server”，以及“lodash”/*`
        allowlist: ['jquery', 'webpack/hot/dev-server', /^lodash/]
    })],
    ...
};

对于大多数用例，应该使用importType和的默认值modulesDir。

问答

为什么不在 Webpack 配置中使用正则表达式？

Webpack 允许在externals数组中插入正则表达式，以捕获非相关模块： 
{
    externals: [
        // 每个非相关模块都是外部的
        // abc -> require("abc")
        /^[a-z\-0-9]+$/
    ]
}

然而，这将使所有非相关的 requires 处于非捆绑状态，因此它不考虑可能在 webpack 本身中定义的别名。这个库扫描node_modules文件夹，所以它只留下正在使用的实际节点模块的未捆绑。

如何从 node_modules 捆绑所需的资产（即 css 文件）？

使用该allowlist选项，这是可能的。我们可以简单地告诉 Webpack 使用以下正则表达式将所有扩展名不是 js/jsx/json 的文件捆绑在一起： 
...
nodeExternals({
  // 加载扩展名为的非javascript文件，可能是通过加载程序加载的
  allowlist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
}),
...

为什么捆绑 node_modules 不是一件好事？

例如，在编写节点库时，您可能希望将代码拆分为多个文件，并使用 Webpack 将它们捆绑在一起。但是 - 您不希望将代码与其整个 node_modules 依赖项捆绑在一起，原因有两个：         1. 它会使你在 npm 上的库膨胀。         2. 它违背了整个 npm 依赖项管理。如果您正在使用 Lodash，并且您的库的使用者也具有相同的 Lodash 依赖项，则 npm 确保它只会被添加一次。但是在你的库中捆绑 Lodash 实际上会使它包含两次，因为 npm 不再管理这个依赖项。 翻译不足的地方还请指教
转载自:https://juejin.cn/post/6981077224103346183
评论
请登录