用webpack5编译时可以使用node的原生模块crypto和zlib

[silentim]

这个特性解决了什么问题？

node的原生模块如crypto，zlib，buffer等不知道如何使用。webpack5官网介绍的方法无效，希望有个小程序的方法

这个 API 长什么样？

希望文档中指出如何配置，或者可以直接使用

[AdvancedCat]

你说的编译时指的打包编译过程，还是希望将 crypto 打包到运行时的包里？

[silentim]

应该开发和生产环境都需要吧。因为我们用到第三方数据接口，接口数据是经node原生模块zlib和crypto压缩并加密的。引入taro后，需要进行解压解密操作。之前用的taro 3.4.x + webpack4，开发和生产运行都能正常使用。

[AdvancedCat]

你直接提供一个 DEMO 吧，可以针对你的 demo 给一些配置的建议

[silentim]

大概如下，只要能正常使用下面方法即可（实际可能还使用到aes和md5算法）

import crypto from 'crypto';
import zlib from 'zlib';
import { Buffer } from 'buffer';

function decrypt(encrypted: string) {
    return zlib.gunzipSync(Buffer.from(encrypted, 'base64')).toString('utf-8');
}

function encrypt(text: string) {
    const o = Buffer.from(text).toString('base64');
    const m = crypto.createHmac('sha256', 'key');
    const h = m.update(o);
    return h.digest('base64');
}

如果不用webpack5官方配置，有类似crypto not found这样的提示，如果按webpack5官网方法配置，会提示util not found或process not found等错误

webpackChain(chain){
      chain.merge({
        resolve: {
          fallback: {
            zlib: require.resolve('browserify-zlib'),
            stream: require.resolve('stream-browserify'),
            util: require.resolve('util'),
            crypto: require.resolve('crypto-browserify'),
            buffer: require.resolve('buffer'),
            assert: require.resolve('assert'),
            process: require.resolve('process/browser')
          },
        },
      })
    }

[silentim]

没有人使用这些组件的吗？看来只能继续使用webpack4了

[AdvancedCat]

webpack-chain 暂时不支持 webpack5 新增的配置项 fallback，因此上面的配置是不可行的。

可以试一下这个：

const resolve = chain.resolve
resolve.set('fallback', {...})

[AdvancedCat]

webpack-chain 暂时不支持 webpack5 新增的配置项 fallback，因此上面的配置是不可行的。

可以试一下这个：

const resolve = chain.resolve
resolve.set('fallback', {...})

额，好像也不行，因为最后 chain.toConfig() 的时候会调用到 resolve.toConfig()，而resolve.toConfig() 只返回支持的配置项。目前看没有很好的办法。

[silentim]

没有别的办法，就只能降到webpack4了

[hellowalker]

我先这么解决的..

webpackChain(chain){
   chain
    .plugin('ProvidePlugin')
    .use(require.resolve('webpack/lib/ProvidePlugin'), [{ 
      Buffer: ['buffer', 'Buffer'], 
      process: ['process/browser.js'] 
    }]);
}

[pisyell]

我先这么解决的..

webpackChain(chain){
   chain
    .plugin('ProvidePlugin')
    .use(require.resolve('webpack/lib/ProvidePlugin'), [{ 
      Buffer: ['buffer', 'Buffer'], 
      process: ['process/browser.js'] 
    }]);
}

你确定上述方法行吗？
我在报错 kleur.dim is not a function
chain.plugin('ProvidePlugin').use(require.resolve('webpack/lib/ProvidePlugin'), [
{
kleur: ['kleur'], // ['kleur', 'kleur']
process: ['process/browser.js'],
},
]);

        这个包 不行

[yoyo837]

See #13656

[pisyell]

webpack-chain 暂时不支持 webpack5 新增的配置项 fallback，因此上面的配置是不可行的。
可以试一下这个：

const resolve = chain.resolve
resolve.set('fallback', {...})

额，好像也不行，因为最后 chain.toConfig() 的时候会调用到 resolve.toConfig()，而resolve.toConfig() 只返回支持的配置项。目前看没有很好的办法。

到现在还没支持fallback？我在用react-markdown 这个包也是 遇到好多问题

[yoyo837]

open for webpack 5 fallback 支持诉求.

[AdvancedCat]

目前 webpack-chain 稳定版本暂不支持 webpack5 的新特性，虽然它的PR有针对 webpack5 的支持，但是好像 webpack-chain
仓库管理员集体“失联”，PR 一直被搁置。

neutrinojs/webpack-chain#297 (comment)

[liudonghua123]

Any updates? I have the same problem when using @wecom/crypto which use node:crypto. Is there any elegant methods for config replacement of node:crypto with crypto-browserify.

[liudonghua123]

webpack-chain 暂时不支持 webpack5 新增的配置项 fallback，因此上面的配置是不可行的。

可以试一下这个：

const resolve = chain.resolve
resolve.set('fallback', {...})

我使用一些配置似乎是可以的，可以在 browser 环境下使用 crypto.

参考 https://juejin.cn/post/7095257275765358606 还需要 stream-browserify -> stream

...
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(Components({
        resolvers: [NutUIResolver({taro: true})]
      }))
      // NOT WORKING
      // chain.resolve.fallback = {
      //     crypto: require.resolve('crypto-browserify'),
      //     stream: require.resolve('stream-browserify'),
      // }
      // method1: WORKING
      chain.resolve.alias.set('crypto', require.resolve('crypto-browserify'))
      chain.resolve.alias.set('stream', require.resolve('stream-browserify'))
      // method2: WORKING
      // const resolve = chain.resolve
      // resolve.set('fallback', { 
      //   crypto: require.resolve('crypto-browserify'),
      //   stream: require.resolve('stream-browserify'),
      // })
    },
...

[charmtiger]

@pisyell 请问 react-markdown 可以用于Taro + 小程序吗？

[pisyell]

@pisyell 请问 react-markdown 可以用于Taro + 小程序吗？

我们用于H5，暂时没用于小程序

[charmtiger]

好的，谢谢  CharmTiger ***@***.***  

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2024年6月20日(星期四) 下午5:50 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [NervJS/taro] 用webpack5编译时可以使用node的原生模块crypto和zlib (Issue #12784) @pisyell 请问 react-markdown 可以用于Taro + 小程序吗？ 我们用于H5，暂时没用于小程序 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>