发布
社区首页 >问答首页 >用webpack实现全栈模块重用

用webpack实现全栈模块重用
EN

Stack Overflow用户
提问于 2018-01-01 09:59:59
回答 1查看 177关注 0票数 1

我正在做一个在后端(nodejs)和前端都使用typescript的项目。这个项目涉及到一些密码学,这意味着我使用的是WebCrypto --在后端,我使用node-webcrypto-ossl作为填充程序,所以我可以在客户端和服务器之间共享代码。

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

在服务器端,它应该导出node-webcrypto-ossl,而在客户端,它只公开window.crypto

我尝试了各种方法,但webpack一直试图将node-webcrypto-ossl拉入浏览器,不出所料地失败了。

下面是我的(失败的)尝试:

代码语言:javascript
代码运行次数:0
复制
let crypto = null;

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

export {
    crypto as webcrypto
};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-01 12:27:26

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

代码语言:javascript
代码运行次数:0
复制
webpack.config.js
...
externals: {
  'node-webcrypto-ossl: {
    commonjs: 'node-webcrypto-ossl'
   },

然后,webpack将不会尝试捆绑特定的模块,而是让那些模块的require保持原样。

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48046736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档