代码之家  ›  专栏  ›  技术社区  ›  LiraNuna

使用Web包重用Fullstack模块

  •  1
  • LiraNuna  · 技术社区  · 6 年前

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

    有没有办法让模块在客户端导出一件事,在服务器上导出另一件事,这样我就可以 import * as crypto from './webcrypto' 以常见方式公开接口?

    在应该导出的服务器上 节点webcrypto ossl 在客户端上只需暴露 window.crypto .

    我尝试了各种方法,但webpack一直试图 节点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 回复  |  直到 6 年前
        1
  •  2
  •   OJ Kwon    6 年前

    方法本身基本正确,您可能需要配置Web包的 externals 保持 node-webcrypto-ossl 仅在nodejs上下文中加载。最短伪值如下所示

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

    然后webpack将不会尝试捆绑特定模块,而是离开 require 这些模块也是如此。

    除此之外,您还可以配置 definePlugin 对于节点也是如此。js/浏览器上下文,这样您的加密模块就可以在构建时为每个环境静态编译,而不是在运行时查看对象。