使用 webpack 重用全栈模块

Posted 2023-02-19

【中文标题】使用 webpack 重用全栈模块

【英文标题】：Fullstack module reuse with webpack

【发布时间】：2018-06-11 07:39:21

【问题描述】：

我正在开发一个在后端 (nodejs) 和前端都使用 typescript 的项目。该项目涉及一些密码学，这意味着我正在使用WebCrypto - 在后端我使用node-webcrypto-ossl 作为垫片，因此我可以在客户端和服务器之间共享代码。

有没有办法让模块在客户端导出一个东西，在服务器上导出另一个东西，这样我就可以import * as crypto from './webcrypto' 以通用方式公开接口？

在服务器上它应该导出node-webcrypto-ossl，而在客户端上只暴露window.crypto。

我尝试了各种方法，但 webpack 不断尝试将 node-webcrypto-ossl 拉入浏览器，这并不奇怪。

这是我的（失败的）尝试：

let crypto = null;

if (typeof window === 'undefined') 
    const WebCrypto = require('node-webcrypto-ossl');
    crypto = new WebCrypto();
 else 
    crypto = window.crypto;


export 
    crypto as webcrypto
;

【参考方案1】：

方法本身大部分是正确的，您可能需要配置 webpack 的 externals 以保持 node-webcrypto-ossl 仅在 nodejs 上下文中加载。最短的伪像

webpack.config.js
...
externals: 
  'node-webcrypto-ossl: 
    commonjs: 'node-webcrypto-ossl'
   ,

然后 webpack 将不会尝试捆绑特定模块，而是将 require 保留为这些模块。

除此之外，您还可以为 node.js / 浏览器上下文配置 definePlugin，以便您的加密模块可以在构建时为每个环境静态编译，而不是在运行时查找对象。

【讨论】：

谢谢！在这种情况下，类型“转发”如何工作？