时间戳

首页 > 解决方案 > Webpack 外部和用户范围的包

node.js - Webpack 外部和用户范围的包

问题描述

首先，我想承认这是我第一次深入研究 webpack，我可能会遗漏一些明显的东西。

我正在开发一个node JS脚本，它作为一种代理运行，为我的目标环境中的 HTML5/JS 客户端应用程序提供功能和数据。部分 API 在运行时在目标环境的 node_modules 中提供，而不是在构建时提供。在我的代码中，我提供了const phoenix = require('@phoenix/apis/dist/index');

运行 webpack，一切都很好，但是当我尝试运行脚本时，我遇到了：

Object.@phoenix/apis/dist/index (/home/path/node_modules/AgendaWeb_0.0.1/main.js:2312:1) 处的令牌无效或意外

这是有道理的，因为 webpack 正在把 require 变成这样：

eval("module.exports = @phoenix/apis/dist/index;\n\n//# sourceURL=webpack:///external_%22@phoenix/apis/dist/index%22?");

并且@phoenix不是可以使用的有效模块/对象名称。

我基本上需要 webpack 只保留 require （我不知道这在捆绑的上下文中是否有意义），因此节点实例可以在其运行的环境中引入模块。

这是我的 webpack 配置：

module.exports = {
entry: {
      main: './src/agendaAgent'
  },
  output: {
      path: path.resolve(__dirname, './prod/')
},
externals: /@phoenix/,
target: 'node',
plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin([{from:'./manifest.json', to:'./'}]),
    new webpack.DefinePlugin({ 'global.GENTLY': false })
    ]
};

我希望有一种方法可以包含一个在运行时引用的外部模块（在node_modules/@phoenix目录中 - 这是它当前的工作方式，在 webpacked 代码之外）

到目前为止，我已经尝试使用 externals（如上所述），并尝试使用 resolve.alias 为其提供通往库的直接路径（这不是一个好的解决方案，因为模块不是开发环境的一部分 - 我没有t 得到这个工作要么）。我也尝试使用 IgnorePlugin，但如果我理解正确，它只会阻止生成匹配的模块。

任何帮助或指导表示赞赏。

标签： node.jswebpack

解决方案

在为此苦苦挣扎了一段时间后，我偶然发现了答案。它没有明确说明，但以下配置更改允许 webpack 正确捆绑所有内容：

    output: {
          path: path.resolve(__dirname, './prod/'),
          libraryTarget: 'umd'
    }

相关的更改是libraryTarget: 'umd'，这使得 webpack 将你的模块捆绑在 commonJS、AMD 和 Global 中。这里的关键点是 webpack 并没有尝试将模块公开为对象的属性。可能还有其他libraryTarget值会导致成功输出，但目前这对我有用。

推荐阅读