使用 webpack 重用 Fullstack 模块

Question

我正在开发一个在后端 (nodejs) 和前端都使用 typescript 的项目。该项目涉及一些密码学，这意味着我使用 WebCrypto - on the backend I use 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
};

Answer 1

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

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

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

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

使用 webpack 重用 Fullstack 模块

Fullstack module reuse with webpack

javascript

node.js

typescript

webpack

react-fullstack