javascript - 使用 webpack 重用 Fullstack 模块

Question

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

有没有办法让模块在客户端导出一个东西，在服务器上导出另一个东西，所以我可以做 import * as crypto from './webcrypto' 来暴露接口(interface)一种常见的方式？

在服务器上它应该导出 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
};

Answer 1

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

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

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

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